<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Animation Worklet API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="ED" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://www.w3.org/TR/css-animation-worklet-1/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Animation Worklet API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/css-animationworklet-1/">https://drafts.css-houdini.org/css-animationworklet-1/</a>
     <dt>Latest published version:
     <dd><a href="https://www.w3.org/TR/css-animation-worklet-1/">https://www.w3.org/TR/css-animation-worklet-1/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bcss-animationworklet%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[css-animationworklet] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="81464"><a class="p-name fn u-email email" href="mailto:majidvp@google.com">Majid Valipour</a>
     <dd class="editor p-author h-card vcard" data-editor-id="98451"><a class="p-name fn u-email email" href="mailto:flackr@chromium.org">Robert Flack</a>
     <dd class="editor p-author h-card vcard" data-editor-id="96463"><a class="p-name fn u-email email" href="mailto:smcgruer@chromium.org">Stephen McGruer</a>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/css-animationworklet-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/css-houdini-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-animationworklet” in the title,
	preferably like this:
	“[css-animationworklet] <i>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-houdini-archive/">archived</a>. </p>
   <p> This document was produced by the <a href="http://www.w3.org/Style/CSS/members">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="http://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#relationship-to-web-animations"><span class="secno">1.1</span> <span class="content">Relationship to the Web Animations API</span></a>
     </ol>
    <li><a href="#animation-worklet-desc"><span class="secno">2</span> <span class="content">Animation Worklet</span></a>
    <li>
     <a href="#animator-desc"><span class="secno">3</span> <span class="content">Animator</span></a>
     <ol class="toc">
      <li><a href="#stateless-animator-desc"><span class="secno">3.1</span> <span class="content">Stateless Animator</span></a>
      <li><a href="#stateful-animator-desc"><span class="secno">3.2</span> <span class="content">Stateful Animator</span></a>
      <li><a href="#animator-definition-desc"><span class="secno">3.3</span> <span class="content">Animator Definition</span></a>
      <li><a href="#registering-animator-definition"><span class="secno">3.4</span> <span class="content">Registering an Animator Definition</span></a>
      <li><a href="#animator-effect-desc"><span class="secno">3.5</span> <span class="content">Animator Effect</span></a>
     </ol>
    <li>
     <a href="#animator-instance-section"><span class="secno">4</span> <span class="content">Animator Instance</span></a>
     <ol class="toc">
      <li><a href="#creating-animator-instance"><span class="secno">4.1</span> <span class="content">Creating an Animator Instance</span></a>
      <li><a href="#running-animators"><span class="secno">4.2</span> <span class="content">Running Animators</span></a>
      <li><a href="#removing-animator"><span class="secno">4.3</span> <span class="content">Removing an Animator Instance</span></a>
      <li><a href="#migrating-animator"><span class="secno">4.4</span> <span class="content">Migrating an Animator Instance</span></a>
      <li><a href="#requesting-animation-frames"><span class="secno">4.5</span> <span class="content">Requesting Animation Frames</span></a>
     </ol>
    <li>
     <a href="#web-animation-integration"><span class="secno">5</span> <span class="content">Web Animations Integration</span></a>
     <ol class="toc">
      <li><a href="#worklet-animation-desc"><span class="secno">5.1</span> <span class="content">Worklet Animation</span></a>
      <li><a href="#creating-worklet-animation"><span class="secno">5.2</span> <span class="content">Creating a Worklet Animation</span></a>
      <li><a href="#timing-and-sync-model"><span class="secno">5.3</span> <span class="content">Worklet Animation Timing and Sync Model</span></a>
      <li><a href="#web-animation-overrides"><span class="secno">5.4</span> <span class="content">Web Animations Overrides</span></a>
      <li><a href="#effect-stack-composite-order"><span class="secno">5.5</span> <span class="content">Effect Stack and Composite Order</span></a>
     </ol>
    <li>
     <a href="#related-concepts"><span class="secno">6</span> <span class="content">Additional Related Concepts</span></a>
     <ol class="toc">
      <li><a href="#worklet-group-effect"><span class="secno">6.1</span> <span class="content">Worklet Group Effect</span></a>
      <li><a href="#scroll-timeline"><span class="secno">6.2</span> <span class="content">ScrollTimeline</span></a>
     </ol>
    <li><a href="#security-considerations"><span class="secno">7</span> <span class="content">Security Considerations</span></a>
    <li><a href="#privacy-considerations"><span class="secno">8</span> <span class="content">Privacy Considerations</span></a>
    <li>
     <a href="#examples"><span class="secno">9</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example-1"><span class="secno">9.1</span> <span class="content">Example 1: Spring timing.</span></a>
      <li><a href="#example-2"><span class="secno">9.2</span> <span class="content">Example 2: Twitter header.</span></a>
      <li><a href="#example-3"><span class="secno">9.3</span> <span class="content">Example 3: Parallax backgrounds.</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
    <em>This section is not normative.</em> 
   <p>This document introduces a new primitive that provides extensibility in web animations and enables
high performance interactive procedural animations on the web. For details on the rationale and
motivation see both <a data-link-type="biblio" href="#biblio-explainer">[explainer]</a> and <a data-link-type="biblio" href="#biblio-principles">[principles]</a>.</p>
   <p>The <a data-link-type="dfn" href="#animation-worklet" id="ref-for-animation-worklet">Animation Worklet</a> API provides a method to create scripted animations that control a set
of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect">animation effects</a>. The API is designed to make it possible for user agents to run such
animations in their own dedicated thread to provide a degree of performance isolation from main
thread.</p>
   <h3 class="heading settled" data-level="1.1" id="relationship-to-web-animations"><span class="secno">1.1. </span><span class="content">Relationship to the Web Animations API</span><a class="self-link" href="#relationship-to-web-animations"></a></h3>
    <em>This section is not normative.</em> 
   <p>Animations running inside an <a data-link-type="dfn" href="#animation-worklet" id="ref-for-animation-worklet①">Animation Worklet</a> execution context expose the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation">Animation</a></code> interface from the Web Animations specification on the main javascript execution context. This means
they can be controlled and inspected from main thread using the same Web Animation APIs.</p>
   <h2 class="heading settled" data-level="2" id="animation-worklet-desc"><span class="secno">2. </span><span class="content">Animation Worklet</span><a class="self-link" href="#animation-worklet-desc"></a></h2>
    <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-worklet">Animation Worklet</dfn> is a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet">Worklet</a></code> responsible for all classes related to custom
animations. The worklet can be accessed via <code class="idl"><a data-link-type="idl" href="#dom-css-animationworklet" id="ref-for-dom-css-animationworklet">animationWorklet</a></code> attribute. 
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css"><c- g>CSS</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①"><c- n>Worklet</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="attribute" data-export data-readonly data-type="Worklet" id="dom-css-animationworklet"><code><c- g>animationWorklet</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-css-animationworklet" id="ref-for-dom-css-animationworklet①">animationWorklet</a></code>'s <a data-link-type="dfn" href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type" id="ref-for-worklet-global-scope-type">worklet global scope type</a> is <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope">AnimationWorkletGlobalScope</a></code>.</p>
   <p><code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①">AnimationWorkletGlobalScope</a></code> represents the global execution context of <code class="idl"><a data-link-type="idl" href="#dom-css-animationworklet" id="ref-for-dom-css-animationworklet②">animationWorklet</a></code>.</p>
<pre class="idl highlight def">[ <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Global" id="ref-for-Global"><c- g>Global</c-></a>=(<a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet②"><c- n>Worklet</c-></a>,<a class="n" data-link-type="idl-name"><c- n>AnimationWorklet</c-></a>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>AnimationWorklet</c-> ]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="animationworkletglobalscope"><code><c- g>AnimationWorkletGlobalScope</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope"><c- n>WorkletGlobalScope</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationworkletglobalscope-registeranimator" id="ref-for-dom-animationworkletglobalscope-registeranimator"><c- g>registerAnimator</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="AnimationWorkletGlobalScope/registerAnimator(name, animatorCtor)" data-dfn-type="argument" data-export id="dom-animationworkletglobalscope-registeranimator-name-animatorctor-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-animationworkletglobalscope-registeranimator-name-animatorctor-name"></a></dfn>, <a class="n" data-link-type="idl-name" href="#callbackdef-animatorinstanceconstructor" id="ref-for-callbackdef-animatorinstanceconstructor"><c- n>AnimatorInstanceConstructor</c-></a> <dfn class="idl-code" data-dfn-for="AnimationWorkletGlobalScope/registerAnimator(name, animatorCtor)" data-dfn-type="argument" data-export id="dom-animationworkletglobalscope-registeranimator-name-animatorctor-animatorctor"><code><c- g>animatorCtor</c-></code><a class="self-link" href="#dom-animationworkletglobalscope-registeranimator-name-animatorctor-animatorctor"></a></dfn>);
};

<c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-animatorinstanceconstructor"><code><c- g>AnimatorInstanceConstructor</c-></code></dfn> = <c- b>any</c-> (<c- b>any</c-> <dfn class="idl-code" data-dfn-for="AnimatorInstanceConstructor" data-dfn-type="argument" data-export id="dom-animatorinstanceconstructor-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-animatorinstanceconstructor-options"></a></dfn>, <c- b>optional</c-> <c- b>any</c-> <dfn class="idl-code" data-dfn-for="AnimatorInstanceConstructor" data-dfn-type="argument" data-export id="dom-animatorinstanceconstructor-state"><code><c- g>state</c-></code><a class="self-link" href="#dom-animatorinstanceconstructor-state"></a></dfn>);

</pre>
   <h2 class="heading settled" data-level="3" id="animator-desc"><span class="secno">3. </span><span class="content">Animator</span><a class="self-link" href="#animator-desc"></a></h2>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator">Animator</dfn> represents a custom animation that is running inside <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope②">AnimationWorkletGlobalScope</a></code>. Each Animator is associated with an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#concept-animation" id="ref-for-concept-animation">animation</a> instance (of
type <code class="idl"><a data-link-type="idl" href="#workletanimation" id="ref-for-workletanimation">WorkletAnimation</a></code>) in the document and determines how that animation progresses its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect①">animation effect</a>. The <code>animate</code> function contains the logic responsible for
translating the animation current time into appropriate progress of the animation effect. An
animator can only be instantiated by construction of a <code class="idl"><a data-link-type="idl" href="#workletanimation" id="ref-for-workletanimation①">WorkletAnimation</a></code> in the document.</p>
   <p>Two animators types are supported: <a data-link-type="dfn" href="#stateless-animator" id="ref-for-stateless-animator">Stateless Animator</a> and <a data-link-type="dfn" href="#stateful-animator" id="ref-for-stateful-animator">Stateful Animator</a> each
providing a different state management strategy.</p>
   <h3 class="heading settled" data-level="3.1" id="stateless-animator-desc"><span class="secno">3.1. </span><span class="content">Stateless Animator</span><a class="self-link" href="#stateless-animator-desc"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stateless-animator">Stateless Animator</dfn> is a type of animator does not depend on any local state either
stored on the instance or global scope. Effectively, the animate function of an <a data-link-type="dfn" href="#stateless-animator" id="ref-for-stateless-animator①">Stateless Animator</a> can be treated as a pure function with the expectation that given the same
input, it produces the same output.</p>
   <div class="note" role="note">
     This is how an stateless animator class should look. 
<pre class="lang-javascript highlight"><c- kr>class</c-> FooAnimator <c- p>{</c->
    constructor<c- p>(</c->options<c- p>)</c-> <c- p>{</c->
        <c- c1>// Called when a new animator is instantiated.</c->
    <c- p>}</c->
    animate<c- p>(</c->currentTime<c- p>,</c-> effect<c- p>)</c-> <c- p>{</c->
        <c- c1>// Animation frame logic goes here.</c->
    <c- p>}</c->
<c- p>}</c->
</pre>
   </div>
   <p class="note" role="note"><span>Note:</span> The statelessness allows animation worklet to perform optimization such as producing multiple
animation frames in parallel, sharing a single animator instance for multiple animations, and
performing very cheap teardown and setup. Using <a data-link-type="dfn" href="#stateless-animator" id="ref-for-stateless-animator②">Stateless Animator</a> is highly recommended to
enable such optimizations.</p>
   <h3 class="heading settled" data-level="3.2" id="stateful-animator-desc"><span class="secno">3.2. </span><span class="content">Stateful Animator</span><a class="self-link" href="#stateful-animator-desc"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stateful-animator">Stateful Animator</dfn> is a type of animator that can have local state and animation worklet
guarantees that it maintains this state as long as the stateful animator fulfills the contract
required by its interface and as described following.</p>
   <p><a data-link-type="dfn" href="#animation-worklet" id="ref-for-animation-worklet②">Animation worklet</a> maintains a set of <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope①">WorkletGlobalScope</a></code>s which may exist across different
threads or processes. Animation worklet may temporarily terminate a global scope (e.g., to preserve
resources) or move a running <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance">animator instance</a> across different global scopes (e.g., if its
effect is mutable only in a certain thread). Animation worklet guarantees that a stateful animator
instance’s state is maintained even if the instance is respawned in a different global scope.</p>
   <p>The basic mechanism for maintaining the state is that the animation worklet snapshots the local
state that is exposed via the <a data-link-type="dfn" href="#state-function" id="ref-for-state-function">state function</a> and then reifies it so that it can be passed into
the constructor when the animator instance is respawned at a later time in a potentially different
global scope. The <a data-link-type="dfn" href="#migrate-an-animator-instance" id="ref-for-migrate-an-animator-instance">migrate an animator instance</a> algorithm specifies this process in details.</p>
   <p>A user-defined stateful animator is expected to fulfill the required contract which is that its
state function returns an object representing its state that can be serialized using structured
serialized algorithm and that it can also recreate its state given that same object passed to its
constructor.</p>
   <div class="note" role="note">
     This is how a stateful animator class should look. 
<pre class="lang-javascript highlight"><c- kr>class</c-> BarAnimator <c- p>{</c->
    constructor<c- p>(</c->options<c- p>,</c-> state<c- p>)</c-> <c- p>{</c->
      <c- c1>// Called when a new animator is instantiated (either first time or after being respawned).</c->
      <c- k>this</c-><c- p>.</c->currentVelocity  <c- o>=</c-> state <c- o>?</c-> state<c- p>.</c->velocity <c- o>:</c-> <c- mi>0</c-><c- p>;</c->
    <c- p>}</c->
    animate<c- p>(</c->currentTime<c- p>,</c-> effect<c- p>)</c-> <c- p>{</c->
        <c- c1>// Animation frame logic goes here and can rely on this.currentVelocity.</c->
        <c- k>this</c-><c- p>.</c->currentVelocity <c- o>+=</c-> <c- mf>0.1</c-><c- p>;</c->
    <c- p>}</c->
    state<c- p>()</c-> <c- p>{</c->
      <c- c1>// The returned object should be serializable using structured clonable algorithm.</c->
      <c- k>return</c-> <c- p>{</c->
        velocity<c- o>:</c-> <c- k>this</c-><c- p>.</c->currentVelocity<c- p>;</c->
      <c- p>}</c->
    <c- p>}</c->
<c- p>}</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="3.3" id="animator-definition-desc"><span class="secno">3.3. </span><span class="content">Animator Definition</span><a class="self-link" href="#animator-definition-desc"></a></h3>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-definition">animator definition</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct">struct</a> which describes the author defined custom
animation logic. It consists of:</p>
   <ul>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-name">animator name</dfn>
      <dd data-md>
       <p>A <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident">&lt;ident></a>#.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="class-constructor">class constructor</dfn>
      <dd data-md>
       <p>A <code class="idl"><a data-link-type="idl" href="#callbackdef-animatorinstanceconstructor" id="ref-for-callbackdef-animatorinstanceconstructor①">AnimatorInstanceConstructor</a></code> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function">callback function</a> type.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animate-function">animate function</dfn>
      <dd data-md>
       <p>A <a data-link-type="dfn" href="https://heycam.github.io/webidl/#Function" id="ref-for-Function">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function①">callback function</a> type.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="state-function">state function</dfn>
      <dd data-md>
       <p>A <a data-link-type="dfn" href="https://heycam.github.io/webidl/#Function" id="ref-for-Function①">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function②">callback function</a> type.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-for="animator definition" data-dfn-type="dfn" data-noexport id="animator-definition-stateful-flag">stateful flag</dfn>
      <dd data-md>
       <p>A boolean flag</p>
     </dl>
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stateful-animator-definition">stateful animator definition</dfn> is an <a data-link-type="dfn" href="#animator-definition" id="ref-for-animator-definition">animator definition</a> whose <a data-link-type="dfn" href="#animator-definition-stateful-flag" id="ref-for-animator-definition-stateful-flag">stateful flag</a> is <b>true</b>.</p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-animator-definition">document animator definition</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct①">struct</a> which describes the information needed by
the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document">document</a> about the author defined custom animation. It consists of:</p>
   <ul>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-for="document animator definition" data-dfn-type="dfn" data-noexport id="document-animator-definition-stateful-flag">stateful flag</dfn>
      <dd data-md>
       <p>A boolean flag</p>
     </dl>
   </ul>
   <h3 class="heading settled" data-level="3.4" id="registering-animator-definition"><span class="secno">3.4. </span><span class="content">Registering an Animator Definition</span><a class="self-link" href="#registering-animator-definition"></a></h3>
    The <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document①">document</a> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="document-animator-definitions">document animator definitions</dfn>. The map gets populated
when <code class="idl"><a data-link-type="idl" href="#dom-animationworkletglobalscope-registeranimator" id="ref-for-dom-animationworkletglobalscope-registeranimator①">registerAnimator(name, animatorCtor)</a></code> is called. 
   <p>An <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope③">AnimationWorkletGlobalScope</a></code> has a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map①">map</a> of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-definitions">animator definitions</dfn>. The map gets
populated when <code class="idl"><a data-link-type="idl" href="#dom-animationworkletglobalscope-registeranimator" id="ref-for-dom-animationworkletglobalscope-registeranimator②">registerAnimator(name, animatorCtor)</a></code> is called.</p>
   <p>Note that to register a <a data-link-type="dfn" href="#stateful-animator-definition" id="ref-for-stateful-animator-definition">stateful animator definition</a> it is simply enough for the registered
class to have a <code>state</code> function.</p>
   <div class="algorithm" data-algorithm="register-animator">
    <p>When the <dfn class="dfn-paneled idl-code" data-dfn-for="AnimationWorkletGlobalScope" data-dfn-type="method" data-export id="dom-animationworkletglobalscope-registeranimator"><code>registerAnimator(<var>name</var>, <var>animatorCtor</var>)</code></dfn> method is called in a <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope④">AnimationWorkletGlobalScope</a></code>, the user agent <em>must</em> run the
following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>name</var> is not a valid <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-ident" id="ref-for-typedef-ident①">&lt;ident></a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror">TypeError</a> and abort all these
steps.</p>
     <li data-md>
      <p>Let <var>animatorDefinitions</var> be the <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope⑤">AnimationWorkletGlobalScope</a></code>'s <a data-link-type="dfn" href="#animator-definitions" id="ref-for-animator-definitions">animator definitions</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map②">map</a>.</p>
     <li data-md>
      <p>If <var>animatorDefinitions</var>[<var>name</var>] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists">exists</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a <a data-link-type="dfn" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror">NotSupportedError</a> and abort all these steps.</p>
     <li data-md>
      <p>If the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-isconstructor" id="ref-for-sec-isconstructor">IsConstructor</a>(<var>animatorCtor</var>) is <b>false</b>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">throw</a> a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror①">TypeError</a> and abort all these steps.</p>
     <li data-md>
      <p>Let <var>prototype</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p">Get</a>(<var>animatorCtor</var>, "prototype").</p>
     <li data-md>
      <p>Let <var>animateFuncValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p①">Get</a>(<var>prototype</var>, "animate").</p>
     <li data-md>
      <p>Let <var>animateFunc</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#es-type-mapping" id="ref-for-es-type-mapping">converting</a> <var>animateFuncValue</var> to the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#Function" id="ref-for-Function②">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function③">callback function</a> type. If an exception is thrown, rethrow the exception and abort
all these steps.</p>
     <li data-md>
      <p>Let <var>stateFuncValue</var> be the result of <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-get-o-p" id="ref-for-sec-get-o-p②">Get</a>(<var>prototype</var>, "state").</p>
     <li data-md>
      <p>Let <var>stateFunc</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#es-type-mapping" id="ref-for-es-type-mapping①">converting</a> <var>stateFuncValue</var> to the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#Function" id="ref-for-Function③">Function</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-function" id="ref-for-dfn-callback-function④">callback function</a> type, If an exception is thrown, set <var>stateful</var> to be <b>false</b>,
otherwise set <var>stateful</var> to be <b>true</b> and <var>stateFunc</var> to be undefined.</p>
     <li data-md>
      <p>Let <var>definition</var> be a new <a data-link-type="dfn" href="#animator-definition" id="ref-for-animator-definition①">animator definition</a> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#animator-name" id="ref-for-animator-name">animator name</a> being <var>name</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#class-constructor" id="ref-for-class-constructor">class constructor</a> being <var>animatorCtor</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#animate-function" id="ref-for-animate-function">animate function</a> being <var>animateFunc</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#state-function" id="ref-for-state-function①">state function</a> being <var>stateFunc</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#animator-definition-stateful-flag" id="ref-for-animator-definition-stateful-flag①">stateful flag</a> being <var>stateful</var></p>
      </ul>
     <li data-md>
      <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set">set</a> the <var>animatorDefinitions</var>[<var>name</var>] to <var>definition</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to run the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>documentAnimatorDefinitions</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document②">document’s</a> <a data-link-type="dfn" href="#document-animator-definitions" id="ref-for-document-animator-definitions">document animator definitions</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map③">map</a>.</p>
       <li data-md>
        <p>Let <var>documentDefinition</var> be a new <a data-link-type="dfn" href="#document-animator-definition" id="ref-for-document-animator-definition">document animator definition</a> with:</p>
        <ul>
         <li data-md>
          <p><a data-link-type="dfn" href="#animator-definition-stateful-flag" id="ref-for-animator-definition-stateful-flag②">stateful flag</a> being <var>stateful</var></p>
        </ul>
       <li data-md>
        <p>If <var>documentAnimatorDefinitions</var>[<var>name</var>] <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists①">exists</a>, run the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>existingDocumentDefinition</var> be the result of <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-get" id="ref-for-map-get">get</a> <var>documentAnimatorDefinitions</var>[<var>name</var>].</p>
         <li data-md>
          <p>If <var>existingDocumentDefinition</var> is <code>"invalid"</code>, abort all these steps.</p>
         <li data-md>
          <p>If <var>existingDocumentDefinition</var> and <var>documentDefinition</var> are not equivalent, (that is
their <a data-link-type="dfn" href="#document-animator-definition-stateful-flag" id="ref-for-document-animator-definition-stateful-flag">stateful flag</a>s are
different), then:</p>
          <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set①">set</a> <var>documentAnimatorDefinitions</var>[<var>name</var>] to <code>"invalid"</code>.</p>
          <p>Log an error to the debugging console stating that the same class was registered
with different <code>stateful flag</code>.</p>
        </ol>
       <li data-md>
        <p>Otherwise, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-set" id="ref-for-map-set②">set</a> <var>documentAnimatorDefinitions</var>[<var>name</var>] to <var>documentDefinition</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.5" id="animator-effect-desc"><span class="secno">3.5. </span><span class="content">Animator Effect</span><a class="self-link" href="#animator-effect-desc"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-effect">Animator Effect</dfn> represents the underlying <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect②">animation effect</a> inside animation
worklet.</p>
   <p>It has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="corresponding-effect">corresponding effect</dfn> property which is a reference to the underlying <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect③">animation effect</a>. It also has corresponding properties for the following <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect④">animation effect</a>'s properties:</p>
   <ul>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time">local time</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#start-delay" id="ref-for-start-delay">start delay</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#end-delay" id="ref-for-end-delay">end delay</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#fill-mode" id="ref-for-fill-mode">fill mode</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#iteration-start" id="ref-for-iteration-start">iteration start</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#iteration-count" id="ref-for-iteration-count">iteration count</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#iteration-duration" id="ref-for-iteration-duration">iteration duration</a>,</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#playback-direction" id="ref-for-playback-direction">playback direction</a>, and</p>
    <li data-md>
     <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timing-function" id="ref-for-timing-function">timing function</a>.</p>
   </ul>
   <p><a data-link-type="dfn" href="#animator-effect" id="ref-for-animator-effect">Animator Effect</a> is represented by the <code class="idl"><a data-link-type="idl" href="#workletanimationeffect" id="ref-for-workletanimationeffect">WorkletAnimationEffect</a></code> interface
inside <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope⑥">AnimationWorkletGlobalScope</a></code>.</p>
<pre class="idl highlight def">[ <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>AnimationWorklet</c-> ]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="workletanimationeffect"><code><c- g>WorkletAnimationEffect</c-></code></dfn> {
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming"><c- n>EffectTiming</c-></a>         <a class="idl-code" data-link-type="method" href="#dom-workletanimationeffect-gettiming" id="ref-for-dom-workletanimationeffect-gettiming"><c- g>getTiming</c-></a>();
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming"><c- n>ComputedEffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-workletanimationeffect-getcomputedtiming" id="ref-for-dom-workletanimationeffect-getcomputedtiming"><c- g>getComputedTiming</c-></a>();
    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="double?" href="#dom-workletanimationeffect-localtime" id="ref-for-dom-workletanimationeffect-localtime"><c- g>localTime</c-></a>;
};

</pre>
   <p class="note" role="note"><span>Note:</span> <code class="idl"><a data-link-type="idl" href="#workletanimationeffect" id="ref-for-workletanimationeffect①">WorkletAnimationEffect</a></code> is basically a restricted version of <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect">AnimationEffect</a></code> interface
  which does not have <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-animationeffect-updatetiming" id="ref-for-dom-animationeffect-updatetiming">updateTiming</a></code> but additionally allows local time to be set.</p>
   <div class="methods">
    <dl>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="WorkletAnimationEffect" data-dfn-type="method" data-export id="dom-workletanimationeffect-gettiming"><code>getTiming()</code></dfn>
     <dd data-md>
      <p>Returns the specified timing properties using the corresponding properties.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="WorkletAnimationEffect" data-dfn-type="method" data-export id="dom-workletanimationeffect-getcomputedtiming"><code>getComputedTiming()</code></dfn>
     <dd data-md>
      <p>Returns the calculated timing properties using the corresponding properties.</p>
     <dt data-md><dfn class="dfn-paneled idl-code" data-dfn-for="WorkletAnimationEffect" data-dfn-type="attribute" data-export id="dom-workletanimationeffect-localtime"><code>localTime</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①">double</a>, nullable</span>
     <dd data-md>
      <p>Getting the attribute returns the corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time①">local time</a>.
Setting the attribute updates the local time given this effect as <var>effect</var> and the attribute value as <var>time</var>:</p>
      <ol>
       <li data-md>
        <p>If the <var>time</var> is the same as <var>effect</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time②">local time</a> then skip following steps.</p>
       <li data-md>
        <p>Set the <var>effect</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time③">local time</a> to <var>time</var>.</p>
       <li data-md>
        <p>Set the <var>effect</var>’s animator instance’s <a data-link-type="dfn" href="#sync-requested-flag" id="ref-for-sync-requested-flag">sync requested flag</a> to <b>true</b>.</p>
      </ol>
    </dl>
   </div>
   <h2 class="heading settled" data-level="4" id="animator-instance-section"><span class="secno">4. </span><span class="content">Animator Instance</span><a class="self-link" href="#animator-instance-section"></a></h2>
   <p>An <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-instance">animator instance</dfn> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#struct" id="ref-for-struct②">struct</a> which describes a fully realized custom <a data-link-type="dfn" href="#animator" id="ref-for-animator">animator</a> in an <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope⑦">AnimationWorkletGlobalScope</a></code>. It has a reference to an <a data-link-type="dfn" href="#animator-definition" id="ref-for-animator-definition②">animator definition</a> and owns the instance specific state such as animation effect and
timeline. It consists of:</p>
   <ul>
    <li data-md>
     <dl>
      <dt data-md><a data-link-type="dfn" href="#animator-name" id="ref-for-animator-name①">animator name</a>
      <dd data-md>
       <p>A string used to identify the animator definition.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><a data-link-type="dfn" href="#frame-requested-flag" id="ref-for-frame-requested-flag">frame requested flag</a>
      <dd data-md>
       <p>A boolean flag that indicates if the animator needs to animate.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sync-requested-flag">sync requested flag</dfn>
      <dd data-md>
       <p>A flag that indicates if the animator needs to sync its output.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="effect">effect</dfn>
      <dd data-md>
       <p>An <a data-link-type="dfn" href="#animator-effect" id="ref-for-animator-effect①">Animator Effect</a>.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-current-time">animator current time</dfn>
      <dd data-md>
       <p>A time value equivalent to the corresponding <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation">worklet animation</a>'s current time.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-timeline">animator timeline</dfn>
      <dd data-md>
       <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timeline" id="ref-for-timeline">timeline</a> of the corresponding <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation①">worklet animation</a>.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-serialized-options">animator serialized options</dfn>
      <dd data-md>
       <p>The serializable object representing the options to be used when constructing the animator
instance.</p>
     </dl>
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="stateful-animator-instance">stateful animator instance</dfn> is an <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①">animator instance</a> whose corresponding
definition is a <a data-link-type="dfn" href="#stateful-animator-definition" id="ref-for-stateful-animator-definition①">stateful animator definition</a>.</p>
   <h3 class="heading settled" data-level="4.1" id="creating-animator-instance"><span class="secno">4.1. </span><span class="content">Creating an Animator Instance</span><a class="self-link" href="#creating-animator-instance"></a></h3>
   <p>Each <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance②">animator instance</a> lives in an <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope⑧">AnimationWorkletGlobalScope</a></code>.</p>
   <p>Each <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope⑨">AnimationWorkletGlobalScope</a></code> has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animator-instance-set">animator instance set</dfn>. The set is populated
when the user agent constructs a new <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance③">animator instance</a> in the <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①⓪">AnimationWorkletGlobalScope</a></code> scope. Each <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance④">animator instance</a> corresponds to a worklet animation in the document scope.</p>
   <div class="algorithm" data-algorithm="create-animator">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="create-a-new-animator-instance">create a new animator instance</dfn> given a <var>name</var>, <var>timeline</var>, <var>effect</var>, <var>serializedOptions</var>, <var>serializedState</var>, and <var>workletGlobalScope</var>, the user agent <em>must</em> run
the following steps:</p>
    <ol>
     <li data-md>
      <p>Let the <var>definition</var> be the result of looking up <var>name</var> on the <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-definitions" id="ref-for-animator-definitions①">animator definitions</a>.</p>
      <p>If <var>definition</var> does not exist abort the following steps.</p>
     <li data-md>
      <p>Let <var>animatorCtor</var> be the <a data-link-type="dfn" href="#class-constructor" id="ref-for-class-constructor①">class constructor</a> of <var>definition</var>.</p>
     <li data-md>
      <p>Let <var>options</var> be <a data-link-type="dfn" href="http://w3c.github.io/html/infrastructure.html#structureddeserialize" id="ref-for-structureddeserialize">StructuredDeserialize</a>(<var>serializedOptions</var>).</p>
     <li data-md>
      <p>Let <var>state</var> be <a data-link-type="dfn" href="http://w3c.github.io/html/infrastructure.html#structureddeserialize" id="ref-for-structureddeserialize①">StructuredDeserialize</a>(<var>serializedState</var>).</p>
     <li data-md>
      <p>Let <var>animatorInstance</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#construct-a-callback-function" id="ref-for-construct-a-callback-function">constructing</a> <var>animatorCtor</var> with
«<var>options</var>, <var>state</var>» as arguments. If an exception is thrown, rethrow the exception and
abort all these steps.</p>
     <li data-md>
      <p>Let <var>animatorEffect</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#construct-a-callback-function" id="ref-for-construct-a-callback-function①">constructing</a> a <code class="idl"><a data-link-type="idl" href="#workletanimationeffect" id="ref-for-workletanimationeffect②">WorkletAnimationEffect</a></code> with its <a data-link-type="dfn" href="#corresponding-effect" id="ref-for-corresponding-effect">corresponding effect</a> being <var>effect</var>.</p>
     <li data-md>
      <p>Set the following on <var>animatorInstance</var> with:</p>
      <ul>
       <li data-md>
        <p><a data-link-type="dfn" href="#animator-name" id="ref-for-animator-name②">animator name</a> being <var>name</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#frame-requested-flag" id="ref-for-frame-requested-flag①">frame requested flag</a> being <b>false</b></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#sync-requested-flag" id="ref-for-sync-requested-flag①">sync requested flag</a> being <b>false</b></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#animator-current-time" id="ref-for-animator-current-time">animator current time</a> being unresolved</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#effect" id="ref-for-effect">effect</a> being <var>animatorEffect</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#animator-timeline" id="ref-for-animator-timeline">animator timeline</a> being <var>timeline</var></p>
       <li data-md>
        <p><a data-link-type="dfn" href="#animator-serialized-options" id="ref-for-animator-serialized-options">animator serialized options</a> being <var>options</var></p>
      </ul>
     <li data-md>
      <p>Add <var>animatorInstance</var> to <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-instance-set" id="ref-for-animator-instance-set">animator instance set</a>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="4.2" id="running-animators"><span class="secno">4.2. </span><span class="content">Running Animators</span><a class="self-link" href="#running-animators"></a></h3>
   <p>When the user agent wants to produce a new animation frame, if for any <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance⑤">animator instance</a> the
associated <a data-link-type="dfn" href="#frame-requested-flag" id="ref-for-frame-requested-flag②">frame requested flag</a> is <b>true</b> then the the user agent <em>must</em> <a data-link-type="dfn" href="#run-animators" id="ref-for-run-animators">run animators</a> for the current frame in all its associated global scopes.</p>
   <p class="note" role="note"><span>Note:</span> The user agent is not required to run animations on every visual frame. It is legal to defer
      generating an animation frame until a later frame. This allow the user agent to
      provide a different service level according to their policy.</p>
   <div class="algorithm" data-algorithm="run-animators">
    <p>When the user agent wants to <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="run-animators">run animators</dfn> in a given <var>workletGlobalScope</var>, it <em>must</em> run the following steps:</p>
    <ol>
     <li data-md>
      <p>Iterate over all <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance⑥">animator instance</a>s in the <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-instance-set" id="ref-for-animator-instance-set①">animator instance
set</a>. For each such <var>animator</var> the user agent <em>must</em> perform the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>animatorName</var> be <var>animator</var>’s <a data-link-type="dfn" href="#animator-name" id="ref-for-animator-name③">animator name</a></p>
       <li data-md>
        <p>Let the <var>definition</var> be the result of looking up <var>animatorName</var> on the <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-definitions" id="ref-for-animator-definitions②">animator definitions</a>.</p>
      </ol>
      <p>If <var>definition</var> does not exist then abort the following steps.</p>
      <ol start="3">
       <li data-md>
        <p>If the <a data-link-type="dfn" href="#frame-requested-flag" id="ref-for-frame-requested-flag③">frame requested flag</a> for <var>animator</var> is <b>false</b> or the effect belonging
to the <var>animator</var> will not be visible within the visual viewport of the current frame
the user agent <em>may</em> abort all the following steps.</p>
        <p class="issue" id="issue-68dc788e"><a class="self-link" href="#issue-68dc788e"></a> Consider giving user agents permission to skip running individual animator
instances to throttle slow animators.</p>
       <li data-md>
        <p>Let <var>animateFunction</var> be <var>definition</var>’s <a data-link-type="dfn" href="#animate-function" id="ref-for-animate-function①">animate function</a>.</p>
       <li data-md>
        <p>Let <var>currentTime</var> be <a data-link-type="dfn" href="#animator-current-time" id="ref-for-animator-current-time①">animator current time</a> of <var>animator</var>.</p>
       <li data-md>
        <p>Let <var>effect</var> be <a data-link-type="dfn" href="#effect" id="ref-for-effect①">effect</a> of <var>animator</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function">Invoke</a> <var>animateFunction</var> with arguments «<var>currentTime</var>, <var>effect</var>»,
and with <var>animator</var> as the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-this-value" id="ref-for-dfn-callback-this-value">callback this value</a>.</p>
      </ol>
     <li data-md>
      <p>If any <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance⑦">animator instance</a>s in the <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-instance-set" id="ref-for-animator-instance-set②">animator instance set</a> has its <a data-link-type="dfn" href="#sync-requested-flag" id="ref-for-sync-requested-flag②">sync requested flag</a> set to <b>true</b> then <a data-link-type="dfn" href="#sync-local-times-to-document" id="ref-for-sync-local-times-to-document">sync local times to document</a> given <var>workletGlobalScope</var>.</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> Although inefficient, it is legal for the user agent to <a data-link-type="dfn" href="#run-animators" id="ref-for-run-animators①">run animators</a> multiple times
in the same frame.</p>
   <p class="issue" id="issue-9dc01310"><a class="self-link" href="#issue-9dc01310"></a> should be explicit as to what happens if the animateFunction throws an exception. At least
we should have wording that the localTime values of the effects are ignored to avoid incorrect
partial updates.</p>
   <h3 class="heading settled" data-level="4.3" id="removing-animator"><span class="secno">4.3. </span><span class="content">Removing an Animator Instance</span><a class="self-link" href="#removing-animator"></a></h3>
   <div class="algorithm" data-algorithm="remove-animator">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="remove-an-animator-instance">remove an animator instance</dfn> given <var>animator</var> and <var>workletGlobalScope</var> the user agent <em>must</em> run the following steps:</p>
    <ol>
     <li data-md>
      <p>Remove <var>animator</var> from <var>workletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-instance-set" id="ref-for-animator-instance-set③">animator instance set</a>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="4.4" id="migrating-animator"><span class="secno">4.4. </span><span class="content">Migrating an Animator Instance</span><a class="self-link" href="#migrating-animator"></a></h3>
   <p>The migration process allows <a data-link-type="dfn" href="#stateful-animator-instance" id="ref-for-stateful-animator-instance">stateful animator instance</a> to be migrated to a different <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①①">AnimationWorkletGlobalScope</a></code> without losing their local state.</p>
   <div class="algorithm" data-algorithm="migrate-animator">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="migrate-an-animator-instance">migrate an animator instance</dfn> from one <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①②">AnimationWorkletGlobalScope</a></code> to another,
given <var>animator</var>, <var>sourceWorkletGlobalScope</var>, <var>destinationWorkletGlobalScope</var>, the user agent <em>must</em> run the following steps :</p>
    <ol>
     <li data-md>
      <p>Let <var>serializedState</var> be undefined.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">Queue a task</a> on <var>sourceWorkletGlobalScope</var> to run the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>animatorName</var> be <var>animator</var>’s <a data-link-type="dfn" href="#animator-name" id="ref-for-animator-name④">animator name</a></p>
       <li data-md>
        <p>Let <var>definition</var> be the result of looking up <var>animatorName</var> on <var>sourceWorkletGlobalScope</var>’s <a data-link-type="dfn" href="#animator-definitions" id="ref-for-animator-definitions③">animator definitions</a>.</p>
        <p>If <var>definition</var> does not exist then abort the following steps.</p>
       <li data-md>
        <p>Let <var>stateful</var> be the <a data-link-type="dfn" href="#animator-definition-stateful-flag" id="ref-for-animator-definition-stateful-flag③">stateful flag</a> of <var>definition</var>.</p>
       <li data-md>
        <p>If <var>stateful</var> is <b>false</b> then abort the following steps.</p>
       <li data-md>
        <p>Let <var>stateFunction</var> be <var>definition</var>’s <a data-link-type="dfn" href="#state-function" id="ref-for-state-function②">state function</a>.</p>
       <li data-md>
        <p>Let <var>state</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#invoke-a-callback-function" id="ref-for-invoke-a-callback-function①">Invoke</a> <var>stateFunction</var> with <var>animator</var> as the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-callback-this-value" id="ref-for-dfn-callback-this-value①">callback this value</a>.  If any exception is thrown, rethrow the exception and abort
the following steps.</p>
       <li data-md>
        <p>Set <var>serializedState</var> to be the result of <a data-link-type="dfn" href="http://w3c.github.io/html/infrastructure.html#structuredserialize" id="ref-for-structuredserialize">StructuredSerialize</a>(<var>state</var>).
If any exception is thrown, then abort the following steps.</p>
       <li data-md>
        <p>Run the procedure to <a data-link-type="dfn" href="#remove-an-animator-instance" id="ref-for-remove-an-animator-instance">remove an animator instance</a> given <var>animator</var>, and <var>sourceWorkletGlobalScope</var>.</p>
      </ol>
     <li data-md>
      <p>Wait for the above task to complete. If the task is aborted, abort the following steps.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">Queue a task</a> on <var>destinationWorkletGlobalScope</var> to run the following steps:</p>
      <ol>
       <li data-md>
        <p>Run the procedure to <a data-link-type="dfn" href="#create-a-new-animator-instance" id="ref-for-create-a-new-animator-instance">create a new animator instance</a> given:</p>
        <ul>
         <li data-md>
          <p>The <var>animator</var>’s <a data-link-type="dfn" href="#animator-name" id="ref-for-animator-name⑤">animator name</a> as name.</p>
         <li data-md>
          <p>The <var>animator</var>’s <a data-link-type="dfn" href="#animator-timeline" id="ref-for-animator-timeline①">animator timeline</a> as timeline.</p>
         <li data-md>
          <p>The <var>animator</var>’s <a data-link-type="dfn" href="#effect" id="ref-for-effect②">effect</a> as effect.</p>
         <li data-md>
          <p>The <var>animator</var>’s <a data-link-type="dfn" href="#animator-serialized-options" id="ref-for-animator-serialized-options①">animator serialized options</a> as options.</p>
         <li data-md>
          <p>The <var>serializedState</var> as state.</p>
         <li data-md>
          <p>The <var>destinationWorkletGlobalScope</var> as workletGlobalScope.</p>
        </ul>
      </ol>
    </ol>
   </div>
   <p>If an animator state getter throws the user agent will remove the animator but does not recreate it.
This effectively removes the animator instance.</p>
   <h3 class="heading settled" data-level="4.5" id="requesting-animation-frames"><span class="secno">4.5. </span><span class="content">Requesting Animation Frames</span><a class="self-link" href="#requesting-animation-frames"></a></h3>
   <p>Each <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance⑧">animator instance</a> has an associated <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="frame-requested-flag">frame requested flag</dfn>. It is initially set
to <b>false</b>. Different circumstances can cause the <a data-link-type="dfn" href="#frame-requested-flag" id="ref-for-frame-requested-flag④">frame requested flag</a> to be set to <b>true</b>. These include the following:</p>
   <ul>
    <li data-md>
     <p>Changes in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#current-time" id="ref-for-current-time">current time</a> of the animator’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timeline" id="ref-for-timeline①">timeline</a></p>
    <li data-md>
     <p>Changes in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#current-time" id="ref-for-current-time①">current time</a> of the animator’s corresponding <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation②">worklet animation</a></p>
   </ul>
   <p>Performing <a data-link-type="dfn" href="#run-animators" id="ref-for-run-animators②">run animators</a> resets the <a data-link-type="dfn" href="#frame-requested-flag" id="ref-for-frame-requested-flag⑤">frame requested flag</a> on animators to <b>false</b>.</p>
   <h2 class="heading settled" data-level="5" id="web-animation-integration"><span class="secno">5. </span><span class="content">Web Animations Integration</span><a class="self-link" href="#web-animation-integration"></a></h2>
   <h3 class="heading settled" data-level="5.1" id="worklet-animation-desc"><span class="secno">5.1. </span><span class="content">Worklet Animation</span><a class="self-link" href="#worklet-animation-desc"></a></h3>
    <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="worklet-animation">Worklet animation</dfn> is a kind of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#concept-animation" id="ref-for-concept-animation①">animation</a> that delegates animating its animation
effect to an <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance⑨">animator instance</a>. It controls the lifetime and playback state of its <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance">corresponding animator instance</a>. 
   <p>Being an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#concept-animation" id="ref-for-concept-animation②">animation</a>, <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation③">worklet animation</a> has an <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect⑤">animation effect</a> and a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timeline" id="ref-for-timeline②">timeline</a>. However unlike other animations the worklet animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#current-time" id="ref-for-current-time②">current time</a> does
not directly determine the animation effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time④">local time</a> (via its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#inherited-time" id="ref-for-inherited-time">inherited time</a>).
Instead the associated <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①⓪">animator instance</a> controls the animation effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time⑤">local time</a> directly. Note that this means that the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timeline" id="ref-for-timeline③">timeline’s</a> current time does not fully determine the
animation’s output.</p>
   <p><a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation④">Worklet animation</a> has the following properties in addition to the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation①">Animation</a></code> interface:</p>
   <ul>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="animation-animator-name">animation animator name</dfn>
      <dd data-md>
       <p>A string that identifies its <a data-link-type="dfn" href="#animator-definition" id="ref-for-animator-definition③">animator definition</a>.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="serialized-options">serialized options</dfn>
      <dd data-md>
       <p>A serializable options object that is used whe constructing a new animator instance.</p>
     </dl>
    <li data-md>
     <dl>
      <dt data-md><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="corresponding-animator-instance">corresponding animator instance</dfn>
      <dd data-md>
       <p>A <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①①">Animator Instance</a>.</p>
     </dl>
   </ul>
   <p>The existence of <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance①">corresponding animator instance</a> for a <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation⑤">worklet animation</a> depends on
the animation <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#play-state" id="ref-for-play-state">play state</a>. See <a href="#web-animation-overrides">§ 5.4 Web Animations Overrides</a> for details on when and this
correspondence changes.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="workletanimation"><code><c- g>WorkletAnimation</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②"><c- n>Animation</c-></a> {
        <a class="idl-code" data-link-type="constructor" href="#dom-workletanimation-workletanimation" id="ref-for-dom-workletanimation-workletanimation"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="WorkletAnimation/WorkletAnimation(animatorName, effects, timeline, options), WorkletAnimation/constructor(animatorName, effects, timeline, options), WorkletAnimation/WorkletAnimation(animatorName, effects, timeline), WorkletAnimation/constructor(animatorName, effects, timeline), WorkletAnimation/WorkletAnimation(animatorName, effects), WorkletAnimation/constructor(animatorName, effects), WorkletAnimation/WorkletAnimation(animatorName), WorkletAnimation/constructor(animatorName)" data-dfn-type="argument" data-export id="dom-workletanimation-workletanimation-animatorname-effects-timeline-options-animatorname"><code><c- g>animatorName</c-></code><a class="self-link" href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-animatorname"></a></dfn>,
              <c- b>optional</c-> (<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①"><c- n>AnimationEffect</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect②"><c- n>AnimationEffect</c-></a>>)? <dfn class="idl-code" data-dfn-for="WorkletAnimation/WorkletAnimation(animatorName, effects, timeline, options), WorkletAnimation/constructor(animatorName, effects, timeline, options), WorkletAnimation/WorkletAnimation(animatorName, effects, timeline), WorkletAnimation/constructor(animatorName, effects, timeline), WorkletAnimation/WorkletAnimation(animatorName, effects), WorkletAnimation/constructor(animatorName, effects), WorkletAnimation/WorkletAnimation(animatorName), WorkletAnimation/constructor(animatorName)" data-dfn-type="argument" data-export id="dom-workletanimation-workletanimation-animatorname-effects-timeline-options-effects"><code><c- g>effects</c-></code><a class="self-link" href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-effects"></a></dfn> = <c- b>null</c->,
              <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline"><c- n>AnimationTimeline</c-></a>? <dfn class="idl-code" data-dfn-for="WorkletAnimation/WorkletAnimation(animatorName, effects, timeline, options), WorkletAnimation/constructor(animatorName, effects, timeline, options), WorkletAnimation/WorkletAnimation(animatorName, effects, timeline), WorkletAnimation/constructor(animatorName, effects, timeline), WorkletAnimation/WorkletAnimation(animatorName, effects), WorkletAnimation/constructor(animatorName, effects), WorkletAnimation/WorkletAnimation(animatorName), WorkletAnimation/constructor(animatorName)" data-dfn-type="argument" data-export id="dom-workletanimation-workletanimation-animatorname-effects-timeline-options-timeline"><code><c- g>timeline</c-></code><a class="self-link" href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-timeline"></a></dfn>,
              <c- b>optional</c-> <c- b>any</c-> <dfn class="idl-code" data-dfn-for="WorkletAnimation/WorkletAnimation(animatorName, effects, timeline, options), WorkletAnimation/constructor(animatorName, effects, timeline, options), WorkletAnimation/WorkletAnimation(animatorName, effects, timeline), WorkletAnimation/constructor(animatorName, effects, timeline), WorkletAnimation/WorkletAnimation(animatorName, effects), WorkletAnimation/constructor(animatorName, effects), WorkletAnimation/WorkletAnimation(animatorName), WorkletAnimation/constructor(animatorName)" data-dfn-type="argument" data-export id="dom-workletanimation-workletanimation-animatorname-effects-timeline-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-options"></a></dfn>);
        <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="WorkletAnimation" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-workletanimation-animatorname"><code><c- g>animatorName</c-></code><a class="self-link" href="#dom-workletanimation-animatorname"></a></dfn>;
};
</pre>
   <figure>
     <img alt="Overview of the WorkletAnimation timing model." src="img/WorkletAnimation-timing-model.svg" width="600"> 
    <figcaption> Overview of the worklet animation timing model. <br> The animation current time is input to the animator instance, which produces a local time value
    for the animation effect. If the animator instance is running in a parallel global scope the
    implementation may also choose to use the local time value to produce the animation output and
    update the visuals in parallel. </figcaption>
   </figure>
   <h3 class="heading settled" data-level="5.2" id="creating-worklet-animation"><span class="secno">5.2. </span><span class="content">Creating a Worklet Animation</span><a class="self-link" href="#creating-worklet-animation"></a></h3>
   <div class="algorithm" data-algorithm="create-worklet-animation">
     <dfn class="dfn-paneled idl-code" data-dfn-for="WorkletAnimation" data-dfn-type="constructor" data-export data-lt="WorkletAnimation(animatorName, effects, timeline, options)|constructor(animatorName, effects, timeline, options)|WorkletAnimation(animatorName, effects, timeline)|constructor(animatorName, effects, timeline)|WorkletAnimation(animatorName, effects)|constructor(animatorName, effects)|WorkletAnimation(animatorName)|constructor(animatorName)" id="dom-workletanimation-workletanimation"><code>WorkletAnimation(<var>animatorName</var>, <var>effects</var>, <var>timeline</var>, <var>options</var>)</code></dfn> 
    <p>Creates a new <code class="idl"><a data-link-type="idl" href="#workletanimation" id="ref-for-workletanimation②">WorkletAnimation</a></code> object using the following procedure:</p>
    <ol>
     <li data-md>
      <p>Let <var>documentAnimatorDefinitions</var> be the associated <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-document" id="ref-for-concept-document③">document’s</a> <a data-link-type="dfn" href="#document-animator-definitions" id="ref-for-document-animator-definitions①">document animator
definitions</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#ordered-map" id="ref-for-ordered-map④">map</a>.</p>
     <li data-md>
      <p>If <var>documentAnimatorDefinitions</var>[<var>animatorName</var>] does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#map-exists" id="ref-for-map-exists②">exists</a>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">throw</a> an <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror②">TypeError</a> and abort the following steps.</p>
     <li data-md>
      <p>If <var>documentAnimatorDefinitions</var>[<var>animatorName</var>] is <code>"invalid"</code>, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw④">throw</a> an <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror③">TypeError</a> and abort the following steps.</p>
     <li data-md>
      <p>Let <var>workletAnimation</var> be a new <code class="idl"><a data-link-type="idl" href="#workletanimation" id="ref-for-workletanimation③">WorkletAnimation</a></code> object.</p>
     <li data-md>
      <p>Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#set-the-timeline-of-an-animation" id="ref-for-set-the-timeline-of-an-animation">set the timeline of an animation</a> on <var>workletAnimation</var> passing <var>timeline</var> as the new timeline or, if a <var>timeline</var> argument is not provided,
passing the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#the-documents-default-timeline" id="ref-for-the-documents-default-timeline">default document timeline</a> of the <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> associated with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> that is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a>.</p>
     <li data-md>
      <p>Let <var>effect</var> be the result corresponding to the first matching condition from below.</p>
      <dl>
       <dt data-md>If <var>effects</var> is a <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect③">AnimationEffect</a></code> object,
       <dd data-md>
        <p>Let effect be <var>effects</var>.</p>
       <dt data-md>If <var>effects</var> is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect④">AnimationEffect</a></code> objects,
       <dd data-md>
        <p>Let <var>effect</var> be a new <code class="idl"><a data-link-type="idl" href="#workletgroupeffect" id="ref-for-workletgroupeffect">WorkletGroupEffect</a></code> with its children set to <var>effects</var>.</p>
       <dt data-md>Otherwise,
       <dd data-md>
        <p>Let <var>effect</var> be undefined.</p>
      </dl>
     <li data-md>
      <p>Let <var>serializedOptions</var> be the result of <a data-link-type="dfn" href="http://w3c.github.io/html/infrastructure.html#structuredserialize" id="ref-for-structuredserialize①">StructuredSerialize</a>(<var>options</var>).
Rethrow any exceptions.</p>
     <li data-md>
      <p>Set the <a data-link-type="dfn" href="#serialized-options" id="ref-for-serialized-options">serialized options</a> of <var>workletAnimation</var> to <var>serializedOptions</var>.</p>
     <li data-md>
      <p>Set the <a data-link-type="dfn" href="#animation-animator-name" id="ref-for-animation-animator-name">animation animator name</a> of <var>workletAnimation</var> to <var>animatorName</var>.</p>
     <li data-md>
      <p>Run the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#set-the-target-effect-of-an-animation" id="ref-for-set-the-target-effect-of-an-animation">set the target effect of an animation</a> on <var>workletAnimation</var> passing <var>effect</var> as the new effect. Note that this may trigger action to <a data-link-type="dfn" href="#set-animator-instance-of-worklet-animation" id="ref-for-set-animator-instance-of-worklet-animation">set animator instance of worklet animation</a>. See <a href="#web-animation-overrides">§ 5.4 Web Animations Overrides</a> for more
details.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="5.3" id="timing-and-sync-model"><span class="secno">5.3. </span><span class="content">Worklet Animation Timing and Sync Model</span><a class="self-link" href="#timing-and-sync-model"></a></h3>
   <p>This section describes how <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation⑥">worklet animation’s</a> timing model differs from other <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#concept-animation" id="ref-for-concept-animation③">animations</a>.</p>
   <p>As described in <a href="#worklet-animation-desc">§ 5.1 Worklet Animation</a>, the <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation⑦">worklet animation’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#current-time" id="ref-for-current-time③">current time</a> does
not determine its <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect⑥">animation effect’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time⑥">local time</a>. Instead the associated <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①②">animator instance</a> controls the animation effect’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time⑦">local time</a> directly. This means that the
animation effect’s local time is controlled from a <code class="idl"><a data-link-type="idl" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope②">WorkletGlobalScope</a></code> which may be in a parallel
execution context.</p>
   <p>Here are a few implications of the above semantics:</p>
   <ul>
    <li data-md>
     <p>Setting the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#current-time" id="ref-for-current-time④">current time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/css-transitions-1/#transition-start-time" id="ref-for-transition-start-time">start time</a> of a <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation⑧">worklet animation</a> does not
necessarily change its output, but may change the animation <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#play-state" id="ref-for-play-state①">play state</a>.</p>
    <li data-md>
     <p>Similarly, invoking <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-animation-finish" id="ref-for-dom-animation-finish">finish()</a></code> or updating a <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation⑨">worklet animation’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#playback-rate" id="ref-for-playback-rate">playback
rate</a> does not necessarily change its output, but may change the animation <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#play-state" id="ref-for-play-state②">play state</a></p>
    <li data-md>
     <p>Querying the animation effect’s local time using <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/web-animations-1/#dom-animationeffect-getcomputedtiming" id="ref-for-dom-animationeffect-getcomputedtiming">getComputedTiming()</a></code> may return stale information, in the case where the <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①③">animator instance</a> is running in a
parallel execution context.</p>
   </ul>
   <p>If a Worklet Animation animation is executing in a parallel worklet execution context, the last
known state of its Animator Effects should be periodically synced back to the main javascript
execution context. The synchronization of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#effect-value" id="ref-for-effect-value">effect values</a> from the parallel worklet execution
context to the main javascript execution context <em>must</em> occur before <a data-link-type="dfn" href="https://html.spec.whatwg.org/#run-the-animation-frame-callbacks" id="ref-for-run-the-animation-frame-callbacks">running the animation frame callbacks</a> as part of the document lifecycle.</p>
   <p>Note that due to the asynchronous nature of this animation model a script running in the main
javascript execution context may see a stale value when reading a <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#target-property" id="ref-for-target-property">target property</a> that is
being animated by a Worklet Animation, compared to the value currently being used to produce the
visual frame that is visible to the user. This is similar to the effect of asynchronous scrolling
when reading scroll offsets in the main javascript execution context.</p>
   <div class="algorithm" data-algorithm="sync-local-times">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sync-local-times-to-document">sync local times to document</dfn> for a given <var>workletGlobalScope</var> the user agent <em>must</em> perform the action that corresponds to the first matching condition from the
following:</p>
    <dl>
     <dt data-md>If the <var>workletGlobalScope</var> is not running in a parallel execution context
     <dd data-md>
      <p>perform the following steps immediately:</p>
     <dt data-md>If the <var>workletGlobalScope</var> is running in a parallel execution context
     <dd data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task③">queue a task</a> to run the following steps before <a data-link-type="dfn" href="https://html.spec.whatwg.org/#run-the-animation-frame-callbacks" id="ref-for-run-the-animation-frame-callbacks①">running the animation frame
 callbacks</a> as part of the document lifecycle:</p>
    </dl>
    <ol>
     <li data-md>
      <p>Iterate over all <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①④">animator instance</a>s in the animation worklet’s global scope <a data-link-type="dfn" href="#animator-instance-set" id="ref-for-animator-instance-set④">animator instance set</a>. For each such <var>animator</var> perform the following steps:</p>
      <ol>
       <li data-md>
        <p>If <var>animator</var>’s <a data-link-type="dfn" href="#sync-requested-flag" id="ref-for-sync-requested-flag③">sync requested flag</a> is <b>false</b> skip the rest of the steps.</p>
       <li data-md>
        <p>Let <var>animatorEffect</var> be <var>animator</var>’s <a data-link-type="dfn" href="#effect" id="ref-for-effect③">effect</a>.</p>
       <li data-md>
        <p>Let <var>effect</var> be <var>animatorEffect</var>’s <a data-link-type="dfn" href="#corresponding-effect" id="ref-for-corresponding-effect①">corresponding effect</a>.</p>
       <li data-md>
        <p>Set <var>effect</var>’s local time to <var>animatorEffect</var>’s local time.</p>
       <li data-md>
        <p>Set <var>animator</var>’s <a data-link-type="dfn" href="#sync-requested-flag" id="ref-for-sync-requested-flag④">sync requested flag</a> to <b>false</b>.</p>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="sync-animation-timings">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="sync-animation-timings-to-worklet">sync animation timings to worklet</dfn> for a given <var>workletAnimation</var> the user agent <em>must</em> perform the following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>workletAnimation</var> does not have a <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance②">corresponding animator instance</a>, abort the
 following steps.</p>
     <li data-md>
      <p>Let <var>animator</var> be <var>workletAnimation</var>’s <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance③">corresponding animator instance</a>.</p>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be the <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①③">AnimationWorkletGlobalScope</a></code> associated with <var>workletAnimation</var>.</p>
     <li data-md>
      <dl>
       <dt data-md>If the <var>workletGlobalScope</var> is not running in a parallel execution context
       <dd data-md>
        <p>perform the following steps immediately.</p>
       <dt data-md>If the <var>workletGlobalScope</var> is running in a parallel execution context
       <dd data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task④">queue a task</a> to run the following steps:</p>
        <ol>
         <li data-md>
          <p>Set <var>animator</var>’s <a data-link-type="dfn" href="#animator-current-time" id="ref-for-animator-current-time②">animator current time</a> to <var>workletAnimation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#current-time" id="ref-for-current-time⑤">current time</a></p>
         <li data-md>
          <p>Let <var>animatorEffect</var> be <var>animator</var>’s <a data-link-type="dfn" href="#effect" id="ref-for-effect④">effect</a>.</p>
         <li data-md>
          <p>Let <var>effect</var> be <var>animatorEffect</var>’s <a data-link-type="dfn" href="#corresponding-effect" id="ref-for-corresponding-effect②">corresponding effect</a>.</p>
         <li data-md>
          <p>Set the following properties on <var>animatorEffect</var> to be the same as <var>effect</var>:</p>
          <ul>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#start-delay" id="ref-for-start-delay①">start delay</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#end-delay" id="ref-for-end-delay①">end delay</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#fill-mode" id="ref-for-fill-mode①">fill mode</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#iteration-start" id="ref-for-iteration-start①">iteration start</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#iteration-count" id="ref-for-iteration-count①">iteration count</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#iteration-duration" id="ref-for-iteration-duration①">iteration duration</a>,</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#playback-direction" id="ref-for-playback-direction①">playback direction</a>, and</p>
           <li data-md>
            <p><a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timing-function" id="ref-for-timing-function①">timing function</a>.</p>
          </ul>
        </ol>
      </dl>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> Notice that the local time is <b>not</b> synced from the document to animation worklet.</p>
   <p class="issue" id="issue-61e3a71a"><a class="self-link" href="#issue-61e3a71a"></a> Come with appropriate mechanism’s for <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①⑤">animator instance</a> to get notified when its
   animation currentTime is changing e.g., via reverse(), finish() or playbackRate change. So that
   it can react appropriately. <a href="https://github.com/w3c/css-houdini-drafts/issues/811">&lt;https://github.com/w3c/css-houdini-drafts/issues/811></a></p>
   <h3 class="heading settled" data-level="5.4" id="web-animation-overrides"><span class="secno">5.4. </span><span class="content">Web Animations Overrides</span><a class="self-link" href="#web-animation-overrides"></a></h3>
   <p>In addition to the existing conditions on when the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#concept-animation" id="ref-for-concept-animation④">animation</a> is considered <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#ready" id="ref-for-ready">ready</a>, a <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation①⓪">worklet animation</a> is only considered <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#ready" id="ref-for-ready①">ready</a> when the following condition is also true:</p>
   <ul>
    <li data-md>
     <p>the user agent has completed any setup required to create the <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation①①">worklet animation’s</a> <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance④">corresponding animator instance</a>.</p>
   </ul>
   <p>When a given worklet animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#play-state" id="ref-for-play-state③">play state</a> changes from <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#idle" id="ref-for-idle">idle</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#finished" id="ref-for-finished">finished</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#running" id="ref-for-running">running</a>, or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#paused" id="ref-for-paused">paused</a>, run the procedure to <a data-link-type="dfn" href="#associate-animator-instance-of-worklet-animation" id="ref-for-associate-animator-instance-of-worklet-animation">associate animator instance of worklet animation</a> given the worket animation as <var>workletAnimation</var>.</p>
   <p>When a given worklet animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#play-state" id="ref-for-play-state④">play state</a> changes from <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#finished" id="ref-for-finished①">finished</a>, <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#running" id="ref-for-running①">running</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#paused" id="ref-for-paused①">paused</a> to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#idle" id="ref-for-idle①">idle</a>, run the procedure to <a data-link-type="dfn" href="#disassociate-animator-instance-of-worklet-animation" id="ref-for-disassociate-animator-instance-of-worklet-animation">disassociate animator instance of worklet animation</a>given the worklet animation as <var>workletAnimation</var>.</p>
   <p>When a given worklet animation’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#replace-state" id="ref-for-replace-state">replace state</a> changes from <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#active" id="ref-for-active">active</a> to either <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#persisted" id="ref-for-persisted">persisted</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#removed" id="ref-for-removed">removed</a> run the procedure to
[=disassociate animator instance of worklet animation]= given the worklet animation as <var>workletAnimation</var>.</p>
   <p class="issue" id="issue-e070ee55"><a class="self-link" href="#issue-e070ee55"></a> In web-animation play state is updated before the actual change in particular some operations
such as play() are asynchronous. We should really invoke these Animator related operation after the
appropriate animation operation is complete instead of when play state has changed. This will
require either finding (or introducing) q new hook in web animation or having override for each such
async operation.</p>
   <p>When the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#set-the-target-effect-of-an-animation" id="ref-for-set-the-target-effect-of-an-animation①">set the target effect of an animation</a> for a given worklet animation
is called, then <a data-link-type="dfn" href="#set-animator-instance-of-worklet-animation" id="ref-for-set-animator-instance-of-worklet-animation①">set animator instance of worklet animation</a> given the worklet animation as <var>workletAnimation</var>.</p>
   <p>When the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#set-the-timeline-of-an-animation" id="ref-for-set-the-timeline-of-an-animation①">set the timeline of an animation</a> for a given <var>workletAnimation</var> is called, then <a data-link-type="dfn" href="#set-animator-instance-of-worklet-animation" id="ref-for-set-animator-instance-of-worklet-animation②">set animator instance of worklet animation</a> given the worklet animation as <var>workletAnimation</var>.</p>
   <p>When the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#set-the-current-time" id="ref-for-set-the-current-time">set the current time</a> or <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#set-the-start-time" id="ref-for-set-the-start-time">set the start time</a> for a given worklet
animation is called, then <a data-link-type="dfn" href="#sync-animation-timings-to-worklet" id="ref-for-sync-animation-timings-to-worklet">sync animation timings to worklet</a> given the worklet animation as <var>workletAnimation</var>.</p>
   <p>When the procedure to <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#update-the-timing-properties-of-an-animation-effect" id="ref-for-update-the-timing-properties-of-an-animation-effect">update the timing properties of an animation effect</a> for a given effect is
called and that effect is owned be a worklet animation, then <a data-link-type="dfn" href="#sync-animation-timings-to-worklet" id="ref-for-sync-animation-timings-to-worklet①">sync animation timings to worklet</a> given that worklet animation as <var>workletAnimation</var>.</p>
   <div class="algorithm" data-algorithm="associate-animator-instance">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="associate-animator-instance-of-worklet-animation">associate animator instance of worklet animation</dfn> given <var>workletAnimation</var>,
the user agent <em>must</em> run the following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>workletAnimation</var> has a <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance⑤">corresponding animator instance</a>, abort the following steps.</p>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be the <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①④">AnimationWorkletGlobalScope</a></code> associated with <var>workletAnimation</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task⑤">Queue a task</a> on <var>workletGlobalScope</var> to run the procedure to <a data-link-type="dfn" href="#create-a-new-animator-instance" id="ref-for-create-a-new-animator-instance①">create a new animator
   instance</a>, passing:</p>
      <ul>
       <li data-md>
        <p>The <var>workletAnimation</var>’s <a data-link-type="dfn" href="#animation-animator-name" id="ref-for-animation-animator-name①">animation animator name</a> as name.</p>
       <li data-md>
        <p>The <var>workletAnimation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#timeline" id="ref-for-timeline④">timeline</a> as timeline.</p>
       <li data-md>
        <p>The <var>workletAnimation</var>’s <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect⑦">animation effect</a> as effect.</p>
       <li data-md>
        <p>The <var>workletAnimation</var>’s <a data-link-type="dfn" href="#serialized-options" id="ref-for-serialized-options①">serialized options</a> as options.</p>
       <li data-md>
        <p>The <var>workletGlobalScope</var> as workletGlobalScope.</p>
      </ul>
     <li data-md>
      <p>If the procedure was successful, set the resulting <a data-link-type="dfn" href="#animator-instance" id="ref-for-animator-instance①⑥">animator instance</a> to be the <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance⑥">corresponding animator instance</a> of <var>workletAnimation</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="disassociate-animator-instance">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="disassociate-animator-instance-of-worklet-animation">disassociate animator instance of worklet animation</dfn> given <var>workletAnimation</var>, the user age <em>must</em> run the following steps:</p>
    <ol>
     <li data-md>
      <p>If <var>workletAnimation</var> does not have a <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance⑦">corresponding animator instance</a>, abort the
following steps.</p>
     <li data-md>
      <p>Let <var>workletGlobalScope</var> be the <code class="idl"><a data-link-type="idl" href="#animationworkletglobalscope" id="ref-for-animationworkletglobalscope①⑤">AnimationWorkletGlobalScope</a></code> associated with <var>workletAnimation</var>.</p>
     <li data-md>
      <p>Let <var>animatorInstance</var> be <var>workletAnimation</var>’s <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance⑧">corresponding animator instance</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task⑥">Queue a task</a> on the <var>workletGlobalScope</var> to run the procedure to <a data-link-type="dfn" href="#remove-an-animator-instance" id="ref-for-remove-an-animator-instance①">remove an animator
 instance</a>, passing <var>animatorInstance</var> as instance and <var>workletGlobalScope</var> as
 workletGlobalScope.</p>
     <li data-md>
      <p>Set <var>workletAnimation</var>’s <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance⑨">corresponding animator instance</a> as undefined.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="set-animator-instance">
    <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="set-animator-instance-of-worklet-animation">set animator instance of worklet animation</dfn> given <var>workletAnimation</var>, the user agent <em>must</em> run the following steps:</p>
    <ol>
     <li data-md>
      <p><a data-link-type="dfn" href="#disassociate-animator-instance-of-worklet-animation" id="ref-for-disassociate-animator-instance-of-worklet-animation①">disassociate animator instance of worklet animation</a> given <var>workletAnimation</var>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="#associate-animator-instance-of-worklet-animation" id="ref-for-associate-animator-instance-of-worklet-animation①">associate animator instance of worklet animation</a> given <var>workletAnimation</var>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="5.5" id="effect-stack-composite-order"><span class="secno">5.5. </span><span class="content">Effect Stack and Composite Order</span><a class="self-link" href="#effect-stack-composite-order"></a></h3>
   <p>As with other animations, <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation①②">worklet animations</a> participate in the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#effect-stack" id="ref-for-effect-stack">effect stack</a>.  A worklet
animation does not have a specific <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-class" id="ref-for-animation-class">animation class</a> which means it has the same composite order
as other Javascript created web animations.</p>
   <h2 class="heading settled" data-level="6" id="related-concepts"><span class="secno">6. </span><span class="content">Additional Related Concepts</span><a class="self-link" href="#related-concepts"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="worklet-group-effect"><span class="secno">6.1. </span><span class="content">Worklet Group Effect</span><a class="self-link" href="#worklet-group-effect"></a></h3>
    <em>This section is not normative.</em> 
   <p><a data-link-type="dfn" href="https://w3c.github.io/web-animations/level-2/#group-effect" id="ref-for-group-effect">Group effect</a> is a type of <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect⑧">animation effect</a> that enbales multiple child animation
effects to be animated together as a group.</p>
   <p><code class="idl"><a data-link-type="idl" href="#workletgroupeffect" id="ref-for-workletgroupeffect①">WorkletGroupEffect</a></code> is a type of <a data-link-type="dfn" href="https://w3c.github.io/web-animations/level-2/#group-effect" id="ref-for-group-effect①">group effect</a> that allows its <a data-link-type="dfn" href="https://w3c.github.io/web-animations/level-2/#child-effect" id="ref-for-child-effect">child effect’s</a> <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time⑧">local times</a> to be mutated individually.</p>
   <p>When a <code class="idl"><a data-link-type="idl" href="#workletgroupeffect" id="ref-for-workletgroupeffect②">WorkletGroupEffect</a></code> is set as the <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#animation-effect" id="ref-for-animation-effect⑨">animation effect</a> of a <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation①③">worklet animation</a>,
its <a data-link-type="dfn" href="#corresponding-animator-instance" id="ref-for-corresponding-animator-instance①⓪">corresponding animator instance</a> can directly control the <a data-link-type="dfn" href="https://w3c.github.io/web-animations/level-2/#child-effect" id="ref-for-child-effect①">child effects</a>' <a data-link-type="dfn" href="https://drafts.csswg.org/web-animations#local-time" id="ref-for-local-time⑨">local
times</a>. This allows a single worklet animation to coordinate multiple effects - see <a href="#example-2">§ 9.2 Example 2: Twitter header.</a> for an example of such a use-case.</p>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=<c- n>AnimationWorklet</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="workletgroupeffect"><code><c- g>WorkletGroupEffect</c-></code></dfn> {
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#workletanimationeffect" id="ref-for-workletanimationeffect③"><c- n>WorkletAnimationEffect</c-></a>> <dfn class="idl-code" data-dfn-for="WorkletGroupEffect" data-dfn-type="method" data-export data-lt="getChildren()" id="dom-workletgroupeffect-getchildren"><code><c- g>getChildren</c-></code><a class="self-link" href="#dom-workletgroupeffect-getchildren"></a></dfn>();
};
</pre>
   <p class="issue" id="issue-9ff2b6cb"><a class="self-link" href="#issue-9ff2b6cb"></a> The above interface exposes a conservative subset of GroupEffect
proposed as part of web-animation-2. We should instead move this into a delta spec against the
web-animation. <a href="https://github.com/w3c/csswg-drafts/issues/2071">&lt;https://github.com/w3c/csswg-drafts/issues/2071></a></p>
   <p class="note" role="note"><span>Note:</span> Group Effect is currently an experimental feature and not well specified in web animations. So
the concept of <code class="idl"><a data-link-type="idl" href="#workletgroupeffect" id="ref-for-workletgroupeffect③">WorkletGroupEffect</a></code> may change dramatically as <a data-link-type="dfn" href="https://w3c.github.io/web-animations/level-2/#group-effect" id="ref-for-group-effect②">Group Effect</a> get specified.
See https://github.com/yi-gu/group_effect/blob/master/README.md for more details.</p>
   <h3 class="heading settled" data-level="6.2" id="scroll-timeline"><span class="secno">6.2. </span><span class="content">ScrollTimeline</span><a class="self-link" href="#scroll-timeline"></a></h3>
    <em>This section is not normative.</em> 
   <p><code class="idl"><a data-link-type="idl" href="https://wicg.github.io/scroll-animations/#scrolltimeline" id="ref-for-scrolltimeline">ScrollTimeline</a></code> is a new concept being proposed for addition to web animation API. It defines
an animation timeline whose time value depends on the scroll position of a scroll container. <a data-link-type="dfn" href="#worklet-animation" id="ref-for-worklet-animation①④">Worklet animations</a> can have a scroll timeline and thus drive their scripted effects based
on a scroll offset.</p>
   <p class="note" role="note"><span>Note:</span> <strong>Access to input</strong>: We are interested on exposing additional user input beside
scrolling (e.g., touch/pointer input) to these animations so that authors can create jank-free
input driven animations which are not really possible today. We are still trying to figure out the
right abstractions and mechanisms to do this.</p>
   <h2 class="heading settled" data-level="7" id="security-considerations"><span class="secno">7. </span><span class="content">Security Considerations</span><a class="self-link" href="#security-considerations"></a></h2>
   <p>There are no known security issues introduced by these features.</p>
   <h2 class="heading settled" data-level="8" id="privacy-considerations"><span class="secno">8. </span><span class="content">Privacy Considerations</span><a class="self-link" href="#privacy-considerations"></a></h2>
   <p>There are no known privacy issues introduced by these features.</p>
   <h2 class="heading settled" data-level="9" id="examples"><span class="secno">9. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <h3 class="heading settled" data-level="9.1" id="example-1"><span class="secno">9.1. </span><span class="content">Example 1: Spring timing.</span><a class="self-link" href="#example-1"></a></h3>
    Here we use Animation Worklet to create animation with a custom spring timing. 
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>'target'</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
await CSS<c- p>.</c->animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'spring-animator.js'</c-><c- p>);</c->
targetEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'target'</c-><c- p>);</c->

<c- kr>const</c-> effect <c- o>=</c-> <c- k>new</c-> KeyframeEffect<c- p>(</c->
  targetEl<c- p>,</c->
  <c- p>{</c->transform<c- o>:</c-> <c- p>[</c-><c- t>'translateX(0)'</c-><c- p>,</c-> <c- t>'translateX(50vw)'</c-><c- p>]},</c->
  <c- p>{</c->duration<c- o>:</c-> <c- mi>1000</c-><c- p>}</c->
<c- p>);</c->
<c- kr>const</c-> animation <c- o>=</c-> <c- k>new</c-> WorkletAnimation<c- p>(</c-><c- t>'spring'</c-><c- p>,</c-> effect<c- p>,</c-> document<c- p>.</c->timeline<c- p>,</c-> <c- p>{</c->k<c- o>:</c-> <c- mi>2</c-><c- p>,</c-> ratio<c- o>:</c-> <c- mf>0.7</c-><c- p>});</c->
animation<c- p>.</c->play<c- p>();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight">registerAnimator<c- p>(</c-><c- t>'spring'</c-><c- p>,</c-> <c- kr>class</c-> SpringAnimator <c- p>{</c->
  constructor<c- p>(</c->options <c- o>=</c-> <c- p>{</c->k<c- o>:</c-> <c- mi>1</c-><c- p>,</c-> ratio<c- o>:</c-> <c- mf>0.5</c-><c- p>})</c-> <c- p>{</c->
    <c- k>this</c-><c- p>.</c->timing <c- o>=</c-> createSpring<c- p>(</c->options<c- p>.</c->k<c- p>,</c-> options<c- p>.</c->ratio<c- p>);</c->
  <c- p>}</c->

  animate<c- p>(</c->currentTime<c- p>,</c-> effect<c- p>)</c-> <c- p>{</c->
    <c- a>let</c-> delta <c- o>=</c-> <c- k>this</c-><c- p>.</c->timing<c- p>(</c->currentTime<c- p>);</c->
    <c- c1>// scale this by target duration</c->
    delta <c- o>=</c-> delta <c- o>*</c-> <c- p>(</c->effect<c- p>.</c->getTimings<c- p>().</c->duration <c- o>/</c-> <c- mi>2</c-><c- p>);</c->
    effect<c- p>.</c->localTime <c- o>=</c-> delta<c- p>;</c->
    <c- c1>// TODO: Provide a method for animate to mark animation as finished once</c->
    <c- c1>// spring simulation is complete, e.g., this.finish()</c->
    <c- c1>// See issue https://github.com/w3c/css-houdini-drafts/issues/808</c->
  <c- p>}</c->
<c- p>});</c->

<c- a>function</c-> createSpring<c- p>(</c->springConstant<c- p>,</c-> ratio<c- p>)</c-> <c- p>{</c->
  <c- c1>// Normalize mass and distance to 1 and assume a reasonable init velocit</c->
  <c- c1>// but these can also become options to this animator.</c->
  <c- kr>const</c-> velocity <c- o>=</c-> <c- mf>0.2</c-><c- p>;</c->
  <c- kr>const</c-> mass <c- o>=</c-> <c- mi>1</c-><c- p>;</c->
  <c- kr>const</c-> distance <c- o>=</c-> <c- mi>1</c-><c- p>;</c->

  <c- c1>// Keep ratio &lt; 1 to ensure it is under-damped.</c->
  ratio <c- o>=</c-> Math<c- p>.</c->min<c- p>(</c->ratio<c- p>,</c-> <c- mi>1</c-> <c- o>-</c-> <c- mi>1</c->e<c- o>-</c-><c- mi>5</c-><c- p>);</c->

  <c- kr>const</c-> damping <c- o>=</c-> ratio <c- o>*</c-> <c- mf>2.0</c-> <c- o>*</c-> Math<c- p>.</c->sqrt<c- p>(</c->springConstant<c- p>);</c->
  <c- kr>const</c-> w <c- o>=</c-> Math<c- p>.</c->sqrt<c- p>(</c-><c- mf>4.0</c-> <c- o>*</c-> springConstant <c- o>-</c-> damping <c- o>*</c-> damping<c- p>)</c-> <c- o>/</c-> <c- p>(</c-><c- mf>2.0</c-> <c- o>*</c-> mass<c- p>);</c->
  <c- kr>const</c-> r <c- o>=</c-> <c- o>-</c-><c- p>(</c->damping <c- o>/</c-> <c- mf>2.0</c-><c- p>);</c->
  <c- kr>const</c-> c1 <c- o>=</c-> distance<c- p>;</c->
  <c- kr>const</c-> c2 <c- o>=</c-> <c- p>(</c->velocity <c- o>-</c-> r <c- o>*</c-> distance<c- p>)</c-> <c- o>/</c-> w<c- p>;</c->

  <c- c1>// return a value in [0..distance]</c->
  <c- k>return</c-> <c- a>function</c-> springTiming<c- p>(</c->timeMs<c- p>)</c-> <c- p>{</c->
    <c- kr>const</c-> time <c- o>=</c-> timeMs <c- o>/</c-> <c- mi>1000</c-><c- p>;</c-> <c- c1>// in seconds</c->
    <c- kr>const</c-> result <c- o>=</c-> Math<c- p>.</c->pow<c- p>(</c->Math<c- p>.</c->E<c- p>,</c-> r <c- o>*</c-> time<c- p>)</c-> <c- o>*</c->
                  <c- p>(</c->c1 <c- o>*</c-> Math<c- p>.</c->cos<c- p>(</c->w <c- o>*</c-> time<c- p>)</c-> <c- o>+</c-> c2 <c- o>*</c-> Math<c- p>.</c->sin<c- p>(</c->w <c- o>*</c-> time<c- p>));</c->
    <c- k>return</c-> distance <c- o>-</c-> result<c- p>;</c->
  <c- p>}</c->
<c- p>}</c->
</pre>
   <h3 class="heading settled" data-level="9.2" id="example-2"><span class="secno">9.2. </span><span class="content">Example 2: Twitter header.</span><a class="self-link" href="#example-2"></a></h3>
    An example of twitter profile header effect where two elements (avatar, and header) are updated in
sync with scroll offset with an additional feature where avatar can have additional physic based
movement based on the velocity and acceleration of the scrolling. 
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>'scrollingContainer'</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>'header'</c-> <c- e>style</c-><c- o>=</c-><c- s>'height: 150px'</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>'avatar'</c-><c- p>>&lt;</c-><c- f>img</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->

// In document scope.
<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
<c- kr>const</c-> headerEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'header'</c-><c- p>);</c->
<c- kr>const</c-> avatarEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'avatar'</c-><c- p>);</c->
<c- kr>const</c-> scrollingContainerEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'scrollingContainer'</c-><c- p>);</c->


<c- kr>const</c-> scrollTimeline  <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
  scrollSource<c- o>:</c-> scrollingContainerEl<c- p>,</c->
  orientation<c- o>:</c-> <c- t>'block'</c-><c- p>,</c->
  timeRange<c- o>:</c-> <c- mi>1000</c-><c- p>,</c->
  startScrollOffset<c- o>:</c-> <c- mi>0</c-><c- p>,</c->
  endScrollOffset<c- o>:</c-> headerEl<c- p>.</c->clientHeight
<c- p>});</c->

<c- kr>const</c-> effects <c- o>=</c-> <c- p>[</c->
    <c- d>/* avatar scales down as we scroll up */</c->
    <c- k>new</c-> KeyframeEffect<c- p>(</c->avatarEl<c- p>,</c->
                    <c- p>{</c->transform<c- o>:</c-> <c- p>[</c-><c- t>'scale(1)'</c-><c- p>,</c-> <c- t>'scale(0.5)'</c-><c- p>]},</c->
                    <c- p>{</c->duration<c- o>:</c-> scrollTimeline<c- p>.</c->timeRange<c- p>}),</c->
    <c- d>/* header loses transparency as we scroll up */</c->
    <c- k>new</c-> KeyframeEffect<c- p>(</c->headerEl<c- p>,</c->
                    <c- p>{</c->opacity<c- o>:</c-> <c- p>[</c-><c- mi>0</c-><c- p>,</c-> <c- mf>0.8</c-><c- p>]},</c->
                    <c- p>{</c->duration<c- o>:</c-> scrollTimeline<c- p>.</c->timeRange<c- p>})</c->
<c- p>];</c->

await CSS<c- p>.</c->animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'twitter-header-animator.js'</c-><c- p>);</c->
<c- kr>const</c-> animation <c- o>=</c-> <c- k>new</c-> WorkletAnimation<c- p>(</c-><c- t>'twitter-header'</c-><c- p>,</c-> effects<c- p>,</c-> scrollTimeline<c- p>);</c->

animation<c- p>.</c->play<c- p>();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// Inside AnimationWorkletGlobalScope.</c->
registerAnimator<c- p>(</c-><c- t>'twitter-header'</c-><c- p>,</c-> <c- kr>class</c-> HeaderAnimator <c- p>{</c->
  constructor<c- p>(</c->options<c- p>,</c-> state <c- o>=</c-> <c- p>{</c->velocity<c- o>:</c-> <c- mi>0</c-><c- p>,</c-> acceleration<c- o>:</c-> <c- mi>0</c-><c- p>})</c-> <c- p>{</c->
    <c- c1>// `state` is either undefined (first time) or it is the previous state (after an animator</c->
    <c- c1>// is migrated between global scopes).</c->
    <c- k>this</c-><c- p>.</c->velocity <c- o>=</c-> state<c- p>.</c->velocity<c- p>;</c->
    <c- k>this</c-><c- p>.</c->acceleration <c- o>=</c-> state<c- p>.</c->acceleration<c- p>;</c->
  <c- p>}</c->


  animate<c- p>(</c->currentTime<c- p>,</c-> effect<c- p>)</c-> <c- p>{</c->
    <c- kr>const</c-> scroll <c- o>=</c-> currentTime<c- p>;</c->  <c- c1>// scroll is in [0, 1000] range</c->

    <c- k>if</c-> <c- p>(</c-><c- k>this</c-><c- p>.</c->prevScroll<c- p>)</c-> <c- p>{</c->
      <c- k>this</c-><c- p>.</c->velocity <c- o>=</c-> scroll <c- o>-</c-> <c- k>this</c-><c- p>.</c->prevScroll<c- p>;</c->
      <c- k>this</c-><c- p>.</c->acceleration <c- o>=</c-> <c- k>this</c-><c- p>.</c->velocity <c- o>-</c-> <c- k>this</c-><c- p>.</c->prevVelocity<c- p>;</c->
    <c- p>}</c->
    <c- k>this</c-><c- p>.</c->prevScroll <c- o>=</c-> scroll<c- p>;</c->
    <c- k>this</c-><c- p>.</c->prevVelocity <c- o>=</c-> velocity<c- p>;</c->


    <c- c1>// Drive the output group effect by setting its children local times individually.</c->
    effect<c- p>.</c->children<c- p>[</c-><c- mi>0</c-><c- p>].</c->localTime <c- o>=</c-> scroll<c- p>;</c->

    effect<c- p>.</c->children<c- p>[</c-><c- mi>1</c-><c- p>].</c->localTime <c- o>=</c-> curve<c- p>(</c->velocity<c- p>,</c-> acceleration<c- p>,</c-> scroll<c- p>);</c->
  <c- p>}</c->

  state<c- p>()</c-> <c- p>{</c->
    <c- c1>// Invoked before any migration attempts. The returned object must be structure clonable</c->
    <c- c1>// and will be passed to constructor to help animator restore its state after migration to the</c->
    <c- c1>// new scope.</c->
    <c- k>return</c-> <c- p>{</c->
      <c- k>this</c-><c- p>.</c->velocity<c- p>,</c->
      <c- k>this</c-><c- p>.</c->acceleration
    <c- p>}</c->
  <c- p>}</c->

<c- p>});</c->

curve<c- p>(</c->scroll<c- p>,</c-> velocity<c- p>,</c-> acceleration<c- p>)</c-> <c- p>{</c->

 <c- k>return</c-> <c- d>/* compute an return a physical movement curve based on scroll position, and per frame</c->
<c- d>           velocity and acceleration. */</c-> <c- p>;</c->
<c- p>}</c->
</pre>
   <h3 class="heading settled" data-level="9.3" id="example-3"><span class="secno">9.3. </span><span class="content">Example 3: Parallax backgrounds.</span><a class="self-link" href="#example-3"></a></h3>
    A simple parallax background example. 
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>style</c-><c- p>></c->
<c- p>.</c-><c- nc>parallax</c-> <c- p>{</c->
    <c- k>position</c-><c- p>:</c-> <c- kc>fixed</c-><c- p>;</c->
    <c- k>top</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
    <c- k>left</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
    <c- k>opacity</c-><c- p>:</c-> <c- mf>0.5</c-><c- p>;</c->
<c- p>}</c->
<c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
<c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>'scrollingContainer'</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"slow"</c-> <c- e>class</c-><c- o>=</c-><c- s>"parallax"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"fast"</c-> <c- e>class</c-><c- o>=</c-><c- s>"parallax"</c-><c- p>>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->

<c- p>&lt;</c-><c- f>script</c-><c- p>></c->
await CSS<c- p>.</c->animationWorklet<c- p>.</c->addModule<c- p>(</c-><c- t>'parallax-animator.js'</c-><c- p>);</c->

<c- kr>const</c-> parallaxSlowEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'slow'</c-><c- p>);</c->
<c- kr>const</c-> parallaxFastEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'fast'</c-><c- p>);</c->
<c- kr>const</c-> scrollingContainerEl <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'scrollingContainer'</c-><c- p>);</c->

<c- kr>const</c-> scrollTimeline <c- o>=</c-> <c- k>new</c-> ScrollTimeline<c- p>({</c->
  scrollSource<c- o>:</c-> scrollingContainerEl<c- p>,</c->
  orientation<c- o>:</c-> <c- t>'block'</c-><c- p>,</c->
  timeRange<c- o>:</c-> <c- mi>1000</c->
<c- p>});</c->
<c- kr>const</c-> scrollRange <c- o>=</c-> scrollingContainerEl<c- p>.</c->scrollHeight <c- o>-</c-> scrollingContainerEl<c- p>.</c->clientHeight<c- p>;</c->

<c- kr>const</c-> slowParallax <c- o>=</c-> <c- k>new</c-> WorkletAnimation<c- p>(</c->
    <c- t>'parallax'</c-><c- p>,</c->
    <c- k>new</c-> KeyframeEffect<c- p>(</c->parallaxSlowEl<c- p>,</c->
        <c- p>{</c-><c- t>'transform'</c-><c- o>:</c-> <c- p>[</c-><c- t>'translateY(0)'</c-><c- p>,</c-> <c- t>'translateY('</c-> <c- o>+</c-> <c- o>-</c->scrollRange <c- o>+</c-> <c- t>'px)'</c-><c- p>]},</c->
        <c- p>{</c->duration<c- o>:</c-> scrollTimeline<c- p>.</c->timeRange<c- p>}),</c->
    scrollTimeline<c- p>,</c->
    <c- p>{</c->rate <c- o>:</c-> <c- mf>0.4</c-><c- p>}</c->
<c- p>);</c->
slowParallax<c- p>.</c->play<c- p>();</c->

<c- kr>const</c-> fastParallax <c- o>=</c-> <c- k>new</c-> WorkletAnimation<c- p>(</c->
    <c- t>'parallax'</c-><c- p>,</c->
    <c- k>new</c-> KeyframeEffect<c- p>(</c->parallaxFastEl<c- p>,</c->
        <c- p>{</c-><c- t>'transform'</c-><c- o>:</c-> <c- p>[</c-><c- t>'translateY(0)'</c-><c- p>,</c-> <c- t>'translateY('</c-> <c- o>+</c-> <c- o>-</c->scrollRange <c- o>+</c-> <c- t>'px)'</c-><c- p>]},</c->
        <c- p>{</c->duration<c- o>:</c-> scrollTimeline<c- p>.</c->timeRange<c- p>}),</c->
    scrollTimeline<c- p>,</c->
    <c- p>{</c->rate <c- o>:</c-> <c- mf>0.8</c-><c- p>}</c->
<c- p>);</c->
fastParallax<c- p>.</c->play<c- p>();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
<pre class="lang-javascript highlight"><c- c1>// Inside AnimationWorkletGlobalScope.</c->
registerAnimator<c- p>(</c-><c- t>'parallax'</c-><c- p>,</c-> <c- kr>class</c-> ParallaxAnimator <c- p>{</c->
  constructor<c- p>(</c->options<c- p>)</c-> <c- p>{</c->
    <c- k>this</c-><c- p>.</c->rate_ <c- o>=</c-> options<c- p>.</c->rate<c- p>;</c->
  <c- p>}</c->

  animate<c- p>(</c->currentTime<c- p>,</c-> effect<c- p>)</c-> <c- p>{</c->
    effect<c- p>.</c->localTime <c- o>=</c-> currentTime <c- o>*</c-> <c- k>this</c-><c- p>.</c->rate_<c- p>;</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#animate-function">animate function</a><span>, in §3.3</span>
   <li><a href="#animation-animator-name">animation animator name</a><span>, in §5.1</span>
   <li><a href="#animation-worklet">Animation Worklet</a><span>, in §2</span>
   <li><a href="#dom-css-animationworklet">animationWorklet</a><span>, in §2</span>
   <li><a href="#animationworkletglobalscope">AnimationWorkletGlobalScope</a><span>, in §2</span>
   <li><a href="#animator">Animator</a><span>, in §3</span>
   <li><a href="#animator-current-time">animator current time</a><span>, in §4</span>
   <li><a href="#animator-definition">animator definition</a><span>, in §3.3</span>
   <li><a href="#animator-definitions">animator definitions</a><span>, in §3.4</span>
   <li><a href="#animator-effect">Animator Effect</a><span>, in §3.5</span>
   <li><a href="#animator-instance">animator instance</a><span>, in §4</span>
   <li><a href="#callbackdef-animatorinstanceconstructor">AnimatorInstanceConstructor</a><span>, in §2</span>
   <li><a href="#animator-instance-set">animator instance set</a><span>, in §4.1</span>
   <li><a href="#animator-name">animator name</a><span>, in §3.3</span>
   <li><a href="#dom-workletanimation-animatorname">animatorName</a><span>, in §5.1</span>
   <li><a href="#animator-serialized-options">animator serialized options</a><span>, in §4</span>
   <li><a href="#animator-timeline">animator timeline</a><span>, in §4</span>
   <li><a href="#associate-animator-instance-of-worklet-animation">associate animator instance of worklet animation</a><span>, in §5.4</span>
   <li><a href="#class-constructor">class constructor</a><span>, in §3.3</span>
   <li><a href="#dom-workletanimation-workletanimation">constructor(animatorName)</a><span>, in §5.2</span>
   <li><a href="#dom-workletanimation-workletanimation">constructor(animatorName, effects)</a><span>, in §5.2</span>
   <li><a href="#dom-workletanimation-workletanimation">constructor(animatorName, effects, timeline)</a><span>, in §5.2</span>
   <li><a href="#dom-workletanimation-workletanimation">constructor(animatorName, effects, timeline, options)</a><span>, in §5.2</span>
   <li><a href="#corresponding-animator-instance">corresponding animator instance</a><span>, in §5.1</span>
   <li><a href="#corresponding-effect">corresponding effect</a><span>, in §3.5</span>
   <li><a href="#create-a-new-animator-instance">create a new animator instance</a><span>, in §4.1</span>
   <li><a href="#disassociate-animator-instance-of-worklet-animation">disassociate animator instance of worklet animation</a><span>, in §5.4</span>
   <li><a href="#document-animator-definition">document animator definition</a><span>, in §3.3</span>
   <li><a href="#document-animator-definitions">document animator definitions</a><span>, in §3.4</span>
   <li><a href="#effect">effect</a><span>, in §4</span>
   <li><a href="#frame-requested-flag">frame requested flag</a><span>, in §4.5</span>
   <li><a href="#dom-workletgroupeffect-getchildren">getChildren()</a><span>, in §6.1</span>
   <li><a href="#dom-workletanimationeffect-getcomputedtiming">getComputedTiming()</a><span>, in §3.5</span>
   <li><a href="#dom-workletanimationeffect-gettiming">getTiming()</a><span>, in §3.5</span>
   <li><a href="#dom-workletanimationeffect-localtime">localTime</a><span>, in §3.5</span>
   <li><a href="#migrate-an-animator-instance">migrate an animator instance</a><span>, in §4.4</span>
   <li><a href="#dom-animationworkletglobalscope-registeranimator">registerAnimator(name, animatorCtor)</a><span>, in §3.4</span>
   <li><a href="#remove-an-animator-instance">remove an animator instance</a><span>, in §4.3</span>
   <li><a href="#run-animators">run animators</a><span>, in §4.2</span>
   <li><a href="#serialized-options">serialized options</a><span>, in §5.1</span>
   <li><a href="#set-animator-instance-of-worklet-animation">set animator instance of worklet animation</a><span>, in §5.4</span>
   <li><a href="#stateful-animator">Stateful Animator</a><span>, in §3.2</span>
   <li><a href="#stateful-animator-definition">stateful animator definition</a><span>, in §3.3</span>
   <li><a href="#stateful-animator-instance">stateful animator instance</a><span>, in §4</span>
   <li>
    stateful flag
    <ul>
     <li><a href="#animator-definition-stateful-flag">dfn for animator definition</a><span>, in §3.3</span>
     <li><a href="#document-animator-definition-stateful-flag">dfn for document animator definition</a><span>, in §3.3</span>
    </ul>
   <li><a href="#state-function">state function</a><span>, in §3.3</span>
   <li><a href="#stateless-animator">Stateless Animator</a><span>, in §3.1</span>
   <li><a href="#sync-animation-timings-to-worklet">sync animation timings to worklet</a><span>, in §5.3</span>
   <li><a href="#sync-local-times-to-document">sync local times to document</a><span>, in §5.3</span>
   <li><a href="#sync-requested-flag">sync requested flag</a><span>, in §4</span>
   <li><a href="#workletanimation">WorkletAnimation</a><span>, in §5.1</span>
   <li><a href="#worklet-animation">Worklet animation</a><span>, in §5.1</span>
   <li><a href="#dom-workletanimation-workletanimation">WorkletAnimation(animatorName)</a><span>, in §5.2</span>
   <li><a href="#dom-workletanimation-workletanimation">WorkletAnimation(animatorName, effects)</a><span>, in §5.2</span>
   <li><a href="#dom-workletanimation-workletanimation">WorkletAnimation(animatorName, effects, timeline)</a><span>, in §5.2</span>
   <li><a href="#dom-workletanimation-workletanimation">WorkletAnimation(animatorName, effects, timeline, options)</a><span>, in §5.2</span>
   <li><a href="#workletanimationeffect">WorkletAnimationEffect</a><span>, in §3.5</span>
   <li><a href="#workletgroupeffect">WorkletGroupEffect</a><span>, in §6.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-transition-start-time">
   <a href="https://drafts.csswg.org/css-transitions-1/#transition-start-time">https://drafts.csswg.org/css-transitions-1/#transition-start-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transition-start-time">5.3. Worklet Animation Timing and Sync Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-ident">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-ident">https://drafts.csswg.org/css-values-4/#typedef-ident</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-ident">3.3. Animator Definition</a>
    <li><a href="#ref-for-typedef-ident①">3.4. Registering an Animator Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespacedef-css">2. Animation Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-document">
   <a href="https://dom.spec.whatwg.org/#concept-document">https://dom.spec.whatwg.org/#concept-document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-document">3.3. Animator Definition</a>
    <li><a href="#ref-for-concept-document①">3.4. Registering an Animator Definition</a> <a href="#ref-for-concept-document②">(2)</a>
    <li><a href="#ref-for-concept-document③">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-queue-a-task①">4.4. Migrating an Animator Instance</a> <a href="#ref-for-queue-a-task②">(2)</a>
    <li><a href="#ref-for-queue-a-task③">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-queue-a-task④">(2)</a>
    <li><a href="#ref-for-queue-a-task⑤">5.4. Web Animations Overrides</a> <a href="#ref-for-queue-a-task⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-exists">
   <a href="https://infra.spec.whatwg.org/#map-exists">https://infra.spec.whatwg.org/#map-exists</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-exists">3.4. Registering an Animator Definition</a> <a href="#ref-for-map-exists①">(2)</a>
    <li><a href="#ref-for-map-exists②">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-get">
   <a href="https://infra.spec.whatwg.org/#map-get">https://infra.spec.whatwg.org/#map-get</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-get">3.4. Registering an Animator Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ordered-map">
   <a href="https://infra.spec.whatwg.org/#ordered-map">https://infra.spec.whatwg.org/#ordered-map</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ordered-map">3.4. Registering an Animator Definition</a> <a href="#ref-for-ordered-map①">(2)</a> <a href="#ref-for-ordered-map②">(3)</a> <a href="#ref-for-ordered-map③">(4)</a>
    <li><a href="#ref-for-ordered-map④">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-map-set">
   <a href="https://infra.spec.whatwg.org/#map-set">https://infra.spec.whatwg.org/#map-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-map-set">3.4. Registering an Animator Definition</a> <a href="#ref-for-map-set①">(2)</a> <a href="#ref-for-map-set②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-struct">
   <a href="https://infra.spec.whatwg.org/#struct">https://infra.spec.whatwg.org/#struct</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-struct">3.3. Animator Definition</a> <a href="#ref-for-struct①">(2)</a>
    <li><a href="#ref-for-struct②">4. Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animation">
   <a href="https://drafts.csswg.org/web-animations-1/#animation">https://drafts.csswg.org/web-animations-1/#animation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation">1.1. Relationship to the Web Animations API</a>
    <li><a href="#ref-for-animation①">5.1. Worklet Animation</a> <a href="#ref-for-animation②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animationeffect">
   <a href="https://drafts.csswg.org/web-animations-1/#animationeffect">https://drafts.csswg.org/web-animations-1/#animationeffect</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationeffect">3.5. Animator Effect</a>
    <li><a href="#ref-for-animationeffect①">5.1. Worklet Animation</a> <a href="#ref-for-animationeffect②">(2)</a>
    <li><a href="#ref-for-animationeffect③">5.2. Creating a Worklet Animation</a> <a href="#ref-for-animationeffect④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-animationtimeline">
   <a href="https://drafts.csswg.org/web-animations-1/#animationtimeline">https://drafts.csswg.org/web-animations-1/#animationtimeline</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationtimeline">5.1. Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-computedeffecttiming">
   <a href="https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming">https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-computedeffecttiming">3.5. Animator Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-effecttiming">
   <a href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming">https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-effecttiming">3.5. Animator Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-animation-finish">
   <a href="https://drafts.csswg.org/web-animations-1/#dom-animation-finish">https://drafts.csswg.org/web-animations-1/#dom-animation-finish</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animation-finish">5.3. Worklet Animation Timing and Sync Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-animationeffect-getcomputedtiming">
   <a href="https://drafts.csswg.org/web-animations-1/#dom-animationeffect-getcomputedtiming">https://drafts.csswg.org/web-animations-1/#dom-animationeffect-getcomputedtiming</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffect-getcomputedtiming">5.3. Worklet Animation Timing and Sync Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-animationeffect-updatetiming">
   <a href="https://drafts.csswg.org/web-animations-1/#dom-animationeffect-updatetiming">https://drafts.csswg.org/web-animations-1/#dom-animationeffect-updatetiming</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationeffect-updatetiming">3.5. Animator Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2. Animation Worklet</a>
    <li><a href="#ref-for-idl-DOMString①">5.1. Worklet Animation</a> <a href="#ref-for-idl-DOMString②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2. Animation Worklet</a> <a href="#ref-for-Exposed①">(2)</a>
    <li><a href="#ref-for-Exposed②">3.5. Animator Effect</a>
    <li><a href="#ref-for-Exposed③">5.1. Worklet Animation</a>
    <li><a href="#ref-for-Exposed④">6.1. Worklet Group Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Global">
   <a href="https://heycam.github.io/webidl/#Global">https://heycam.github.io/webidl/#Global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Global">2. Animation Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">2. Animation Worklet</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-callback-function">
   <a href="https://heycam.github.io/webidl/#dfn-callback-function">https://heycam.github.io/webidl/#dfn-callback-function</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-callback-function">3.3. Animator Definition</a> <a href="#ref-for-dfn-callback-function①">(2)</a> <a href="#ref-for-dfn-callback-function②">(3)</a>
    <li><a href="#ref-for-dfn-callback-function③">3.4. Registering an Animator Definition</a> <a href="#ref-for-dfn-callback-function④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">3.5. Animator Effect</a> <a href="#ref-for-idl-double①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet">
   <a href="https://drafts.css-houdini.org/worklets/#worklet">https://drafts.css-houdini.org/worklets/#worklet</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet">2. Animation Worklet</a> <a href="#ref-for-worklet①">(2)</a> <a href="#ref-for-worklet②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-workletglobalscope">
   <a href="https://drafts.css-houdini.org/worklets/#workletglobalscope">https://drafts.css-houdini.org/worklets/#workletglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletglobalscope">2. Animation Worklet</a>
    <li><a href="#ref-for-workletglobalscope①">3.2. Stateful Animator</a>
    <li><a href="#ref-for-workletglobalscope②">5.3. Worklet Animation Timing and Sync Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-worklet-global-scope-type">
   <a href="https://drafts.css-houdini.org/worklets/#worklet-global-scope-type">https://drafts.css-houdini.org/worklets/#worklet-global-scope-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-global-scope-type">2. Animation Worklet</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-transitions-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-transition-start-time" style="color:initial">start time</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-ident" style="color:initial">&lt;ident></span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-concept-document" style="color:initial">document</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-map-exists" style="color:initial">exist</span>
     <li><span class="dfn-paneled" id="term-for-map-get" style="color:initial">get</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-ordered-map" style="color:initial">map</span>
     <li><span class="dfn-paneled" id="term-for-map-set" style="color:initial">set</span>
     <li><span class="dfn-paneled" id="term-for-struct" style="color:initial">struct</span>
    </ul>
   <li>
    <a data-link-type="biblio">[web-animations-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-animation" style="color:initial">Animation</span>
     <li><span class="dfn-paneled" id="term-for-animationeffect" style="color:initial">AnimationEffect</span>
     <li><span class="dfn-paneled" id="term-for-animationtimeline" style="color:initial">AnimationTimeline</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-computedeffecttiming" style="color:initial">ComputedEffectTiming</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-effecttiming" style="color:initial">EffectTiming</span>
     <li><span class="dfn-paneled" id="term-for-dom-animation-finish" style="color:initial">finish()</span>
     <li><span class="dfn-paneled" id="term-for-dom-animationeffect-getcomputedtiming" style="color:initial">getComputedTiming()</span>
     <li><span class="dfn-paneled" id="term-for-dom-animationeffect-updatetiming" style="color:initial">updateTiming()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-Global" style="color:initial">Global</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-dfn-callback-function" style="color:initial">callback function</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
    </ul>
   <li>
    <a data-link-type="biblio">[worklets-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-worklet" style="color:initial">Worklet</span>
     <li><span class="dfn-paneled" id="term-for-workletglobalscope" style="color:initial">WorkletGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-worklet-global-scope-type" style="color:initial">worklet global scope type</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1]
   <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-web-animations-1">[WEB-ANIMATIONS-1]
   <dd>Brian Birtles; et al. <a href="https://www.w3.org/TR/web-animations-1/">Web Animations</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/web-animations-1/">https://www.w3.org/TR/web-animations-1/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
   <dt id="biblio-worklets-1">[WORKLETS-1]
   <dd>Ian Kilpatrick. <a href="https://www.w3.org/TR/worklets-1/">Worklets Level 1</a>. 7 June 2016. WD. URL: <a href="https://www.w3.org/TR/worklets-1/">https://www.w3.org/TR/worklets-1/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-explainer">[EXPLAINER]
   <dd><a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/README.md">Animation Worklet Explainer</a>. URL: <a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/README.md">https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/README.md</a>
   <dt id="biblio-principles">[PRINCIPLES]
   <dd><a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/principles.md">Animation Worklet Design Principles and Goals</a>. URL: <a href="https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/principles.md">https://github.com/w3c/css-houdini-drafts/blob/master/css-animationworklet/principles.md</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed⑤"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet①①"><c- n>Worklet</c-></a> <a data-readonly data-type="Worklet" href="#dom-css-animationworklet"><code><c- g>animationWorklet</c-></code></a>;
};

[ <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Global" id="ref-for-Global①"><c- g>Global</c-></a>=(<a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#worklet" id="ref-for-worklet②①"><c- n>Worklet</c-></a>,<a class="n" data-link-type="idl-name"><c- n>AnimationWorklet</c-></a>), <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>AnimationWorklet</c-> ]
<c- b>interface</c-> <a href="#animationworkletglobalscope"><code><c- g>AnimationWorkletGlobalScope</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/worklets/#workletglobalscope" id="ref-for-workletglobalscope③"><c- n>WorkletGlobalScope</c-></a> {
    <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-animationworkletglobalscope-registeranimator" id="ref-for-dom-animationworkletglobalscope-registeranimator③"><c- g>registerAnimator</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <a href="#dom-animationworkletglobalscope-registeranimator-name-animatorctor-name"><code><c- g>name</c-></code></a>, <a class="n" data-link-type="idl-name" href="#callbackdef-animatorinstanceconstructor" id="ref-for-callbackdef-animatorinstanceconstructor②"><c- n>AnimatorInstanceConstructor</c-></a> <a href="#dom-animationworkletglobalscope-registeranimator-name-animatorctor-animatorctor"><code><c- g>animatorCtor</c-></code></a>);
};

<c- b>callback</c-> <a href="#callbackdef-animatorinstanceconstructor"><code><c- g>AnimatorInstanceConstructor</c-></code></a> = <c- b>any</c-> (<c- b>any</c-> <a href="#dom-animatorinstanceconstructor-options"><code><c- g>options</c-></code></a>, <c- b>optional</c-> <c- b>any</c-> <a href="#dom-animatorinstanceconstructor-state"><code><c- g>state</c-></code></a>);


[ <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>AnimationWorklet</c-> ]
<c- b>interface</c-> <a href="#workletanimationeffect"><code><c- g>WorkletAnimationEffect</c-></code></a> {
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming" id="ref-for-dictdef-effecttiming①"><c- n>EffectTiming</c-></a>         <a class="idl-code" data-link-type="method" href="#dom-workletanimationeffect-gettiming" id="ref-for-dom-workletanimationeffect-gettiming①"><c- g>getTiming</c-></a>();
    <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#dictdef-computedeffecttiming" id="ref-for-dictdef-computedeffecttiming①"><c- n>ComputedEffectTiming</c-></a> <a class="idl-code" data-link-type="method" href="#dom-workletanimationeffect-getcomputedtiming" id="ref-for-dom-workletanimationeffect-getcomputedtiming①"><c- g>getComputedTiming</c-></a>();
    <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="double?" href="#dom-workletanimationeffect-localtime" id="ref-for-dom-workletanimationeffect-localtime①"><c- g>localTime</c-></a>;
};


[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#workletanimation"><code><c- g>WorkletAnimation</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animation" id="ref-for-animation②①"><c- n>Animation</c-></a> {
        <a class="idl-code" data-link-type="constructor" href="#dom-workletanimation-workletanimation" id="ref-for-dom-workletanimation-workletanimation①"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-animatorname"><code><c- g>animatorName</c-></code></a>,
              <c- b>optional</c-> (<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect①①"><c- n>AnimationEffect</c-></a> <c- b>or</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationeffect" id="ref-for-animationeffect②①"><c- n>AnimationEffect</c-></a>>)? <a href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-effects"><code><c- g>effects</c-></code></a> = <c- b>null</c->,
              <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="https://drafts.csswg.org/web-animations-1/#animationtimeline" id="ref-for-animationtimeline①"><c- n>AnimationTimeline</c-></a>? <a href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-timeline"><code><c- g>timeline</c-></code></a>,
              <c- b>optional</c-> <c- b>any</c-> <a href="#dom-workletanimation-workletanimation-animatorname-effects-timeline-options-options"><code><c- g>options</c-></code></a>);
        <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-workletanimation-animatorname"><code><c- g>animatorName</c-></code></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④①"><c- g>Exposed</c-></a>=<c- n>AnimationWorklet</c->]
<c- b>interface</c-> <a href="#workletgroupeffect"><code><c- g>WorkletGroupEffect</c-></code></a> {
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#workletanimationeffect" id="ref-for-workletanimationeffect③①"><c- n>WorkletAnimationEffect</c-></a>> <a href="#dom-workletgroupeffect-getchildren"><code><c- g>getChildren</c-></code></a>();
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Consider giving user agents permission to skip running individual animator
instances to throttle slow animators.<a href="#issue-68dc788e"> ↵ </a></div>
   <div class="issue"> should be explicit as to what happens if the animateFunction throws an exception. At least
we should have wording that the localTime values of the effects are ignored to avoid incorrect
partial updates.<a href="#issue-9dc01310"> ↵ </a></div>
   <div class="issue"> Come with appropriate mechanism’s for <a data-link-type="dfn" href="#animator-instance">animator instance</a> to get notified when its
   animation currentTime is changing e.g., via reverse(), finish() or playbackRate change. So that
   it can react appropriately. <a href="https://github.com/w3c/css-houdini-drafts/issues/811">&lt;https://github.com/w3c/css-houdini-drafts/issues/811></a><a href="#issue-61e3a71a"> ↵ </a></div>
   <div class="issue"> In web-animation play state is updated before the actual change in particular some operations
such as play() are asynchronous. We should really invoke these Animator related operation after the
appropriate animation operation is complete instead of when play state has changed. This will
require either finding (or introducing) q new hook in web animation or having override for each such
async operation.<a href="#issue-e070ee55"> ↵ </a></div>
   <div class="issue"> The above interface exposes a conservative subset of GroupEffect
proposed as part of web-animation-2. We should instead move this into a delta spec against the
web-animation. <a href="https://github.com/w3c/csswg-drafts/issues/2071">&lt;https://github.com/w3c/csswg-drafts/issues/2071></a><a href="#issue-9ff2b6cb"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="animation-worklet">
   <b><a href="#animation-worklet">#animation-worklet</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-worklet">1. Introduction</a>
    <li><a href="#ref-for-animation-worklet①">1.1. Relationship to the Web Animations API</a>
    <li><a href="#ref-for-animation-worklet②">3.2. Stateful Animator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-css-animationworklet">
   <b><a href="#dom-css-animationworklet">#dom-css-animationworklet</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-animationworklet">2. Animation Worklet</a> <a href="#ref-for-dom-css-animationworklet①">(2)</a> <a href="#ref-for-dom-css-animationworklet②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animationworkletglobalscope">
   <b><a href="#animationworkletglobalscope">#animationworkletglobalscope</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animationworkletglobalscope">2. Animation Worklet</a> <a href="#ref-for-animationworkletglobalscope①">(2)</a>
    <li><a href="#ref-for-animationworkletglobalscope②">3. Animator</a>
    <li><a href="#ref-for-animationworkletglobalscope③">3.4. Registering an Animator Definition</a> <a href="#ref-for-animationworkletglobalscope④">(2)</a> <a href="#ref-for-animationworkletglobalscope⑤">(3)</a>
    <li><a href="#ref-for-animationworkletglobalscope⑥">3.5. Animator Effect</a>
    <li><a href="#ref-for-animationworkletglobalscope⑦">4. Animator Instance</a>
    <li><a href="#ref-for-animationworkletglobalscope⑧">4.1. Creating an Animator Instance</a> <a href="#ref-for-animationworkletglobalscope⑨">(2)</a> <a href="#ref-for-animationworkletglobalscope①⓪">(3)</a>
    <li><a href="#ref-for-animationworkletglobalscope①①">4.4. Migrating an Animator Instance</a> <a href="#ref-for-animationworkletglobalscope①②">(2)</a>
    <li><a href="#ref-for-animationworkletglobalscope①③">5.3. Worklet Animation Timing and Sync Model</a>
    <li><a href="#ref-for-animationworkletglobalscope①④">5.4. Web Animations Overrides</a> <a href="#ref-for-animationworkletglobalscope①⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-animatorinstanceconstructor">
   <b><a href="#callbackdef-animatorinstanceconstructor">#callbackdef-animatorinstanceconstructor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-animatorinstanceconstructor">2. Animation Worklet</a>
    <li><a href="#ref-for-callbackdef-animatorinstanceconstructor①">3.3. Animator Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator">
   <b><a href="#animator">#animator</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator">4. Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stateless-animator">
   <b><a href="#stateless-animator">#stateless-animator</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stateless-animator">3. Animator</a>
    <li><a href="#ref-for-stateless-animator①">3.1. Stateless Animator</a> <a href="#ref-for-stateless-animator②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stateful-animator">
   <b><a href="#stateful-animator">#stateful-animator</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stateful-animator">3. Animator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-definition">
   <b><a href="#animator-definition">#animator-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-definition">3.3. Animator Definition</a>
    <li><a href="#ref-for-animator-definition①">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-animator-definition②">4. Animator Instance</a>
    <li><a href="#ref-for-animator-definition③">5.1. Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-name">
   <b><a href="#animator-name">#animator-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-name">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-animator-name①">4. Animator Instance</a>
    <li><a href="#ref-for-animator-name②">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-animator-name③">4.2. Running Animators</a>
    <li><a href="#ref-for-animator-name④">4.4. Migrating an Animator Instance</a> <a href="#ref-for-animator-name⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="class-constructor">
   <b><a href="#class-constructor">#class-constructor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-class-constructor">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-class-constructor①">4.1. Creating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animate-function">
   <b><a href="#animate-function">#animate-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animate-function">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-animate-function①">4.2. Running Animators</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="state-function">
   <b><a href="#state-function">#state-function</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-state-function">3.2. Stateful Animator</a>
    <li><a href="#ref-for-state-function①">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-state-function②">4.4. Migrating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-definition-stateful-flag">
   <b><a href="#animator-definition-stateful-flag">#animator-definition-stateful-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-definition-stateful-flag">3.3. Animator Definition</a>
    <li><a href="#ref-for-animator-definition-stateful-flag①">3.4. Registering an Animator Definition</a> <a href="#ref-for-animator-definition-stateful-flag②">(2)</a>
    <li><a href="#ref-for-animator-definition-stateful-flag③">4.4. Migrating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stateful-animator-definition">
   <b><a href="#stateful-animator-definition">#stateful-animator-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stateful-animator-definition">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-stateful-animator-definition①">4. Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-animator-definition">
   <b><a href="#document-animator-definition">#document-animator-definition</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-animator-definition">3.4. Registering an Animator Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-animator-definition-stateful-flag">
   <b><a href="#document-animator-definition-stateful-flag">#document-animator-definition-stateful-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-animator-definition-stateful-flag">3.4. Registering an Animator Definition</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-animator-definitions">
   <b><a href="#document-animator-definitions">#document-animator-definitions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-animator-definitions">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-document-animator-definitions①">5.2. Creating a Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-definitions">
   <b><a href="#animator-definitions">#animator-definitions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-definitions">3.4. Registering an Animator Definition</a>
    <li><a href="#ref-for-animator-definitions①">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-animator-definitions②">4.2. Running Animators</a>
    <li><a href="#ref-for-animator-definitions③">4.4. Migrating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-animationworkletglobalscope-registeranimator">
   <b><a href="#dom-animationworkletglobalscope-registeranimator">#dom-animationworkletglobalscope-registeranimator</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationworkletglobalscope-registeranimator">2. Animation Worklet</a>
    <li><a href="#ref-for-dom-animationworkletglobalscope-registeranimator①">3.4. Registering an Animator Definition</a> <a href="#ref-for-dom-animationworkletglobalscope-registeranimator②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-effect">
   <b><a href="#animator-effect">#animator-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-effect">3.5. Animator Effect</a>
    <li><a href="#ref-for-animator-effect①">4. Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="corresponding-effect">
   <b><a href="#corresponding-effect">#corresponding-effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-corresponding-effect">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-corresponding-effect①">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-corresponding-effect②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="workletanimationeffect">
   <b><a href="#workletanimationeffect">#workletanimationeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletanimationeffect">3.5. Animator Effect</a> <a href="#ref-for-workletanimationeffect①">(2)</a>
    <li><a href="#ref-for-workletanimationeffect②">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-workletanimationeffect③">6.1. Worklet Group Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-workletanimationeffect-gettiming">
   <b><a href="#dom-workletanimationeffect-gettiming">#dom-workletanimationeffect-gettiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-workletanimationeffect-gettiming">3.5. Animator Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-workletanimationeffect-getcomputedtiming">
   <b><a href="#dom-workletanimationeffect-getcomputedtiming">#dom-workletanimationeffect-getcomputedtiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-workletanimationeffect-getcomputedtiming">3.5. Animator Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-workletanimationeffect-localtime">
   <b><a href="#dom-workletanimationeffect-localtime">#dom-workletanimationeffect-localtime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-workletanimationeffect-localtime">3.5. Animator Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-instance">
   <b><a href="#animator-instance">#animator-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-instance">3.2. Stateful Animator</a>
    <li><a href="#ref-for-animator-instance①">4. Animator Instance</a>
    <li><a href="#ref-for-animator-instance②">4.1. Creating an Animator Instance</a> <a href="#ref-for-animator-instance③">(2)</a> <a href="#ref-for-animator-instance④">(3)</a>
    <li><a href="#ref-for-animator-instance⑤">4.2. Running Animators</a> <a href="#ref-for-animator-instance⑥">(2)</a> <a href="#ref-for-animator-instance⑦">(3)</a>
    <li><a href="#ref-for-animator-instance⑧">4.5. Requesting Animation Frames</a>
    <li><a href="#ref-for-animator-instance⑨">5.1. Worklet Animation</a> <a href="#ref-for-animator-instance①⓪">(2)</a> <a href="#ref-for-animator-instance①①">(3)</a>
    <li><a href="#ref-for-animator-instance①②">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-animator-instance①③">(2)</a> <a href="#ref-for-animator-instance①④">(3)</a> <a href="#ref-for-animator-instance①⑤">(4)</a>
    <li><a href="#ref-for-animator-instance①⑥">5.4. Web Animations Overrides</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sync-requested-flag">
   <b><a href="#sync-requested-flag">#sync-requested-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sync-requested-flag">3.5. Animator Effect</a>
    <li><a href="#ref-for-sync-requested-flag①">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-sync-requested-flag②">4.2. Running Animators</a>
    <li><a href="#ref-for-sync-requested-flag③">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-sync-requested-flag④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="effect">
   <b><a href="#effect">#effect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-effect">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-effect①">4.2. Running Animators</a>
    <li><a href="#ref-for-effect②">4.4. Migrating an Animator Instance</a>
    <li><a href="#ref-for-effect③">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-effect④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-current-time">
   <b><a href="#animator-current-time">#animator-current-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-current-time">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-animator-current-time①">4.2. Running Animators</a>
    <li><a href="#ref-for-animator-current-time②">5.3. Worklet Animation Timing and Sync Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-timeline">
   <b><a href="#animator-timeline">#animator-timeline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-timeline">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-animator-timeline①">4.4. Migrating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-serialized-options">
   <b><a href="#animator-serialized-options">#animator-serialized-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-serialized-options">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-animator-serialized-options①">4.4. Migrating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="stateful-animator-instance">
   <b><a href="#stateful-animator-instance">#stateful-animator-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stateful-animator-instance">4.4. Migrating an Animator Instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animator-instance-set">
   <b><a href="#animator-instance-set">#animator-instance-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animator-instance-set">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-animator-instance-set①">4.2. Running Animators</a> <a href="#ref-for-animator-instance-set②">(2)</a>
    <li><a href="#ref-for-animator-instance-set③">4.3. Removing an Animator Instance</a>
    <li><a href="#ref-for-animator-instance-set④">5.3. Worklet Animation Timing and Sync Model</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-new-animator-instance">
   <b><a href="#create-a-new-animator-instance">#create-a-new-animator-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-new-animator-instance">4.4. Migrating an Animator Instance</a>
    <li><a href="#ref-for-create-a-new-animator-instance①">5.4. Web Animations Overrides</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="run-animators">
   <b><a href="#run-animators">#run-animators</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-animators">4.2. Running Animators</a> <a href="#ref-for-run-animators①">(2)</a>
    <li><a href="#ref-for-run-animators②">4.5. Requesting Animation Frames</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="remove-an-animator-instance">
   <b><a href="#remove-an-animator-instance">#remove-an-animator-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-remove-an-animator-instance">4.4. Migrating an Animator Instance</a>
    <li><a href="#ref-for-remove-an-animator-instance①">5.4. Web Animations Overrides</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="migrate-an-animator-instance">
   <b><a href="#migrate-an-animator-instance">#migrate-an-animator-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-migrate-an-animator-instance">3.2. Stateful Animator</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="frame-requested-flag">
   <b><a href="#frame-requested-flag">#frame-requested-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frame-requested-flag">4. Animator Instance</a>
    <li><a href="#ref-for-frame-requested-flag①">4.1. Creating an Animator Instance</a>
    <li><a href="#ref-for-frame-requested-flag②">4.2. Running Animators</a> <a href="#ref-for-frame-requested-flag③">(2)</a>
    <li><a href="#ref-for-frame-requested-flag④">4.5. Requesting Animation Frames</a> <a href="#ref-for-frame-requested-flag⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="worklet-animation">
   <b><a href="#worklet-animation">#worklet-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-worklet-animation">4. Animator Instance</a> <a href="#ref-for-worklet-animation①">(2)</a>
    <li><a href="#ref-for-worklet-animation②">4.5. Requesting Animation Frames</a>
    <li><a href="#ref-for-worklet-animation③">5.1. Worklet Animation</a> <a href="#ref-for-worklet-animation④">(2)</a> <a href="#ref-for-worklet-animation⑤">(3)</a>
    <li><a href="#ref-for-worklet-animation⑥">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-worklet-animation⑦">(2)</a> <a href="#ref-for-worklet-animation⑧">(3)</a> <a href="#ref-for-worklet-animation⑨">(4)</a>
    <li><a href="#ref-for-worklet-animation①⓪">5.4. Web Animations Overrides</a> <a href="#ref-for-worklet-animation①①">(2)</a>
    <li><a href="#ref-for-worklet-animation①②">5.5. Effect Stack and Composite Order</a>
    <li><a href="#ref-for-worklet-animation①③">6.1. Worklet Group Effect</a>
    <li><a href="#ref-for-worklet-animation①④">6.2. ScrollTimeline</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="animation-animator-name">
   <b><a href="#animation-animator-name">#animation-animator-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-animation-animator-name">5.2. Creating a Worklet Animation</a>
    <li><a href="#ref-for-animation-animator-name①">5.4. Web Animations Overrides</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="serialized-options">
   <b><a href="#serialized-options">#serialized-options</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serialized-options">5.2. Creating a Worklet Animation</a>
    <li><a href="#ref-for-serialized-options①">5.4. Web Animations Overrides</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="corresponding-animator-instance">
   <b><a href="#corresponding-animator-instance">#corresponding-animator-instance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-corresponding-animator-instance">5.1. Worklet Animation</a> <a href="#ref-for-corresponding-animator-instance①">(2)</a>
    <li><a href="#ref-for-corresponding-animator-instance②">5.3. Worklet Animation Timing and Sync Model</a> <a href="#ref-for-corresponding-animator-instance③">(2)</a>
    <li><a href="#ref-for-corresponding-animator-instance④">5.4. Web Animations Overrides</a> <a href="#ref-for-corresponding-animator-instance⑤">(2)</a> <a href="#ref-for-corresponding-animator-instance⑥">(3)</a> <a href="#ref-for-corresponding-animator-instance⑦">(4)</a> <a href="#ref-for-corresponding-animator-instance⑧">(5)</a> <a href="#ref-for-corresponding-animator-instance⑨">(6)</a>
    <li><a href="#ref-for-corresponding-animator-instance①⓪">6.1. Worklet Group Effect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="workletanimation">
   <b><a href="#workletanimation">#workletanimation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletanimation">3. Animator</a> <a href="#ref-for-workletanimation①">(2)</a>
    <li><a href="#ref-for-workletanimation②">5.2. Creating a Worklet Animation</a> <a href="#ref-for-workletanimation③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-workletanimation-workletanimation">
   <b><a href="#dom-workletanimation-workletanimation">#dom-workletanimation-workletanimation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-workletanimation-workletanimation">5.1. Worklet Animation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sync-local-times-to-document">
   <b><a href="#sync-local-times-to-document">#sync-local-times-to-document</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sync-local-times-to-document">4.2. Running Animators</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sync-animation-timings-to-worklet">
   <b><a href="#sync-animation-timings-to-worklet">#sync-animation-timings-to-worklet</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sync-animation-timings-to-worklet">5.4. Web Animations Overrides</a> <a href="#ref-for-sync-animation-timings-to-worklet①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="associate-animator-instance-of-worklet-animation">
   <b><a href="#associate-animator-instance-of-worklet-animation">#associate-animator-instance-of-worklet-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-associate-animator-instance-of-worklet-animation">5.4. Web Animations Overrides</a> <a href="#ref-for-associate-animator-instance-of-worklet-animation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="disassociate-animator-instance-of-worklet-animation">
   <b><a href="#disassociate-animator-instance-of-worklet-animation">#disassociate-animator-instance-of-worklet-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-disassociate-animator-instance-of-worklet-animation">5.4. Web Animations Overrides</a> <a href="#ref-for-disassociate-animator-instance-of-worklet-animation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="set-animator-instance-of-worklet-animation">
   <b><a href="#set-animator-instance-of-worklet-animation">#set-animator-instance-of-worklet-animation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-set-animator-instance-of-worklet-animation">5.2. Creating a Worklet Animation</a>
    <li><a href="#ref-for-set-animator-instance-of-worklet-animation①">5.4. Web Animations Overrides</a> <a href="#ref-for-set-animator-instance-of-worklet-animation②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="workletgroupeffect">
   <b><a href="#workletgroupeffect">#workletgroupeffect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-workletgroupeffect">5.2. Creating a Worklet Animation</a>
    <li><a href="#ref-for-workletgroupeffect①">6.1. Worklet Group Effect</a> <a href="#ref-for-workletgroupeffect②">(2)</a> <a href="#ref-for-workletgroupeffect③">(3)</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>